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深入 浅 出 Ext JS% 沁 这 


以 用 户 为 中 心 的 时 代 ， 应 用 的 界面 外 观 变 得 越 来 越 重 要 。 然 而 ， 很 多 程序 员 都 缺乏 美术 功底 ， 要 开发 出 界面 美 
观 的 应 用 实 属 不 易 。Ext JS 的 出 现 ， 为 广大 程序 员 解决 了 这 一 难题 。 它 有 丰富 多 彩 的 界面 和 强大 的 功能 ， 是 开发 具 
有 炫丽 外 观 的 RIA 应 用 的 最 佳 选择 。 

本 书 是 《深入 浅 出 Ext JS》 的 升级 版 ， 涵 盖 了 最 新 发 布 的 Ext JS 3.2 新 特性 ， 并 对 上 一 版 的 内 容 进行 增补 ， 充 
实 了 示例 代码 ， 同 时 补充 了 两 个 功能 强大 的 实例 。 特 别 是 新 增 了 如 何 优化 基于 EXT 的 应 用 ， 提 升 加 载 速度 ， 如 何 创 
建 用 户 扩 展 组 件 以 及 常用 的 第 三 方 扩展 件 等 内 容 。 大 家 可 以 看 到 如 何在 EXT 中 使 用 漂亮 的 图 表 ， 尽 情 欣 赏 EXT 在 性 
能 方面 实现 的 巨大 突破 ， 以 及 各 种 各 样 的 绚丽 组 件 。 

本 书 注重 理论 与 实践 相 结合 ， 适 合 各 层次 Web 开 发 人 员 阅 读 。 


全 本 书 提供 配套 光盘 ， 内 含 书 中 所 有 示例 的 完整 源 代 码 ， 几 乎 所 有 示例 都 可 以 在 本 地 直接 运行 。 此 外 ， 光 盘 还 提供 了 
- jBPM 4 视频 教程 ， 供 感 兴趣 的 读者 学 习 参 考 。 
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了 中 


前 


再 次 拿 起 书稿 , 距离 本 书 第 一 版 的 出 版 已 是 一 年 有 余 , 很 高 兴 看 到 EXT 依 然 在 不 断 向 前 发 展 ， 
国内 的 EXT 开 发 者 也 越 来 越 多 。 这 些 事实 都 证 明了 RIA 的 活力 和 前 景 ， 无 论 是 最 终 客户 还 是 开发 
者 都 期 竺 在 B/S 结 构 中 获得 更 加 灵活 而 又 强大 的 功能 。 这 一 年 中 ， 我 们 接触 、 实 践 、 改 造 也 放弃 
了 许多 基于 EXT 的 应 用 系统 ， 这 些 经 验 让 我 们 对 EXT 的 原理 和 应 用 场景 都 有 了 更 多 的 认识 和 感 
触 。 我 们 也 希望 将 这 些 积 累 的 经 验 与 大 家 共享 ， 共 同 提高 。 

这 次 改版 的 主要 目的 是 将 书 中 的 内 容 从 EXT 2.x 版 本 升级 到 EXT 3.x， 并 对 上 一 版 中 的 内 容 进 
行 增补 。 实 际 上 ，EXT 2.x 至 3.x 的 版 本 升级 并 没有 为 我 们 带 来 阵痛 ， 绝 大 部 分 EXT2.x 中 的 功能 依 
然 可 以 在 EXT 3.x 中 使 用 ， 这 对 开发 者 来 说 是 一 个 很 好 的 消息 ， 意 味 着 系统 升级 会 简单 许多 ， 我 
们 只 需要 考虑 是 否 为 原 有 系统 添加 EXT 3.x 版 本 中 新 加 入 的 特性 就 可 以 了 ， 原 有 的 功能 依然 可 以 
正常 使 用 。 

这 对 我 们 也 是 一 个 好 消息 ， 在 书 的 改版 过 程 中 ， 可 以 把 精力 更 多 集中 在 对 新 功能 的 介绍 上 。 
我 们 对 这 一 版 新 增 的 内 容 充 满 了 信心 ， 无 论 是 对 EXT 3.x 中 新 增 功能 的 介绍 ， 还 是 在 原 有 内 容 基 
础 上 进行 的 扩充 都 闪烁 着 次 眼 的 光芒 。 大 家 可 以 看 到 如 何在 EXT 中 使 用 漂亮 的 图 表 ， 可 以 尽情 感 
叹 EXT 在 性 能 方面 实现 的 巨大 突破 ， 还 有 各 种 各 样 的 绚丽 组 件 ， 先 不 管 它们 好 用 不 好 用 ， 只 看 到 
它们 的 显示 效果 就 足够 我 们 惊叹 了 。 

不 得 不 提 的 是 ， 随 着 企业 对 EXT 的 应 用 规模 逐渐 变 大 ， 如 何 对 原 有 功能 进行 扩展 ， 如 何 编写 
自 定义 组 件 ， 如 何 使 用 插件 等 问题 开始 慢 慢 浮 出 水 面 。 我 们 很 高 兴 看 到 更 多 开发 者 加 入 到 定制 
EXT 组 件 的 行列 中 , 希望 这 一 版 中 对 用 户 扩展 和 插件 的 介绍 及 实例 能 够 帮助 大 家 一 睹 EXT 定 制 组 
件 的 风采 。 

任何 想 学 习 EXT 的 开发 者 都 可 以 通过 这 本 书 快 速 入 门 。 书 中 包含 的 所 有 功能 都 配 有 实例 ， 大 
部 分 实例 都 可 以 直接 在 本 地 使 用 浏览 器 打开 。 对 于 一 些 必须 使 用 后 台 脚 本 支持 的 实例 , 我们 也 尽 
量 使 用 最 简单 的 后 台 脚 本 实现 ， 和 避免 初 学 者 被 复杂 的 配置 和 框架 应 用 混淆 了 视听 。 

大 多 数 实例 都 可 以 在 本 地 直接 运行 ， 打 开 随 书 光盘 中 的 ext-3.0.0/examples 文 件 夹 ， 可 以 看 到 
书 中 每 一 章 内 容 都 对 应 了 一 个 单独 的 文件 夹 (如 第 3 章 对 应 的 文件 夹 为 03.grid)， 打 开 对 应 的 文件 
夹 ， 双 击 其 中 的 HTML 文 件 就 可 以 使 用 浏览 器 运行 实例 ?。 

对 于 那些 需要 后 台 脚 本 支持 的 实例 ， 需 要 先 确保 本 机 安装 了 JDK 并 正确 配置 了 环境 变量 ， 然 


QD 光盘 中 有 一 个 名 为 howto.swf 的 文件 ， 其 中 以 视频 的 方式 讲解 了 如 何 查找 书 中 对 应 的 实例 以 及 如 何 运行 这 些 
实例 。 
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后 进入 随 书 光盘 中 的 apache-tomcat-5.5.28 目 录 下 , 执行 bin 目 录 下 的 startup.bat 批 处 理 文件 ， 当 服务 
器 启动 完成 后 即 可 使 用 浏览 器 访问 http://localhost:8080/ext-3.0.0/examples 下 的 实例 了 。 

EXT 与 AIR 的 相关 实例 都 放 在 随 书 光盘 的 air 目 录 下 ， 在 运行 这 些 实例 之 前 要 在 本 机 安装 
AdobeAIRSDK， 然 后 执行 实例 中 的 脚本 即 可 运行 实例 。 

光盘 中 除了 书 中 所 述 功能 的 实例 之 外 ， 我 们 还 额外 附加 了 一 些 工作 流 引 擎 (jBPM 4.x) 的 演 
示 视 频 。jBPM 4 是 family168 下 一 步 的 发 展 方向 ， 我 们 在 jBPM 4.x 之 上 开发 的 应 用 也 都 使 用 EXT 
来 实现 前 台 的 布局 与 展现 ， 希 望 为 大 家 拓展 视野 。 

最 后 ， 我 们 还 要 感谢 人 民 邮 电 出 版 社 图 灵 公 司 对 我 们 的 支持 ， 因 为 有 他 们 的 支持 和 帮助 ， 我 
们 才能 顺利 完成 本 书 的 改版 工作 。 

希望 大 家 能 够 喜欢 《深入 浅 出 Ext JS》( 第 2 版 )。 


徐 会 生 康 爱 媛 ” 何 启 伟 
2010 年 1 月 
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第 1 版 前 言 


Ext JS 通 常 简称 为 EXT, 它 是 一 个 非常 优秀 的 Ajax 框 架 ， 用 JavaScript 编 写 , 与 后 台 技 术 无 关 ， 
可 以 用 来 开发 具有 炫丽 外 观 的 富 客 户 端 应 用 。EXT 所 开发 的 多 彩 界面 吸引 了 许多 程序 员 的 眼球 ， 
同时 也 吸引 了 众多 客户 ， 它 似乎 一 夜 之 间 就 迅速 流行 开 来 。 对 于 企业 应 用 系统 ， 尤 其 是 MIS 类 型 
的 系统 而 言 ，EXT 非 常 适用 。 

当 我 们 第 一 次 使 用 EXT 时 ， 就 被 它 深 深 地 吸引 住 了 。 对 于 我 们 这 些 没 有 美术 功底 的 程序 员 来 
说 ，EXT 为 我 们 解决 了 一 大 难题 ， 因 为 它 天 生 拥 有 炫丽 的 外 表 。 同 时 ， 有 很 多 用 其 他 技术 无 法 实 
现 或 极 难 实现 的 功能 ， 却 能 用 EXT 轻 易 实现 ， 比 如 EXT 中 的 表格 、 树 形 、 布 局 等 控件 能 为 我 们 的 
日 常 开发 工作 节约 大 量 的 时 间 和 精力 ， 这 些 都 坚定 了 我 们 使 用 EXT 的 决心 。 

我 们 在 学 习 EXT 的 过 程 中 做 了 大 量 笔记 ， 记 下 了 学 习 过 程 中 的 一 些 心 得 和 体会 ， 同 时 也 写 了 
很 多 示例 程序 ， 但 是 从 未 想 过 会 将 这 些 资 料 付 诸 出 版 。EXT 的 参考 资料 很 缺乏 ， 我 们 发 现 身 边 很 
多 学 习 EXT 的 朋友 都 在 黑暗 中 摸索 ， 尤 其 是 英文 不 太 好 的 朋友 ， 学 习 起 来 非常 吃力 。EXT 的 中 文 
资料 就 更 少 了 , 虽然 有 人 把 EXT 官 方 的 API 文 档 中 文化 了 , 但 是 API 文 档 中 只 有 一 些 基础 理论 和 简 
单 示例 , 并 不 能 指导 我 们 快速 地 去 实践 。 我 们 是 实用 主义 者 , 本 书 的 最 大 特点 就 是 以 实例 为 基础 ， 
在 实例 的 基础 上 讲解 EXT 的 各 种 用 法 。 这 样 既 便 于 读者 理解 ， 也 方便 读者 亲自 实践 ， 从 而 迅速 地 
将 所 学 到 的 知识 运用 到 实际 项 目 中 。 

本 书 适合 有 一 定 CSS 和 HTML 基 础 的 开发 者 阅读 , 它 的 主要 目的 是 让 开发 者 能 快速 学 会 EXT， 


并 立即 付 诸 实践 。 书 中 的 示例 代码 都 是 以 EXT 2.2 为 基础 的 ， 也 包含 py ea.2.2 

了 即将 发 布 的 EXT 3.0 中 的 新 特性 ， 对 EXT 的 相关 知识 进行 了 深入 而 Bu 

全 面 的 阐述 。 9 
EXT 发 布 包 中 有 一 个 examples 目 录 ， 是 专门 用 来 放置 各 种 演示 ed 

示例 的 ， 本 书 附 带 的 所 有 示例 ?也 可 以 直接 放 在 这 个 目录 下 使 用 。 使 ee 

用 时 ， 请 将 对 应 目录 放 在 EXT 发 布 包 的 examples 目 录 下 ， 可 以 用 浏 ee 

览 器 打开 示例 HTML 文 件 观看 效果 〈 见 图 0-1) 。 mi 
示例 中 使 用 了 localXHR.js， 无 需 服务 器 就 可 以 读 取 JSON 数 据 ， 有 

从 而 可 以 直接 在 本 地 浏览 大 部 分 示例 。 对 于 那些 需要 后 台 JSP 提 供 数 el 

据 的 示例 ， 最 简单 的 方法 是 将 整个 EXT 发 布 包 复制 到 Tomcat 的 Cd 4append 


webapps 目 录 下 , 启动 Tomcat 后 , 可 通过 浏览 器 访问 examples 下 的 示例 。 图 0-1 examples 目 录 展 开 图 


Q 这 些 示 例 可 以 从 图 灵 公司 网 站 本 书 配套 页 面 下 载 。 一 一 编者 注 
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2 第 1 版 前 言 


出 于 对 EXT 的 喜爱 ， 又 承蒙 广大 爱好 EXT 的 朋友 的 厚爱 ， 我 们 写作 了 本 书 。 如 果 有 不 恰当 之 
处 ， 获 请 批评 指正 。 为 了 便于 与 读者 朋友 交流 ， 我 们 特 在 我 们 的 网 站 www.family168.com 上 为 本 
书 开辟 了 专门 的 页 面 。 欢 迎 大 家 把 对 本 书 的 意见 和 建议 发 表 在 这 个 页 面 上 来 ， 我 们 会 积极 参与 
讨论 ， 在 此 深 表 感谢 。 

最 后 , 我 们 要 感谢 所 有 在 本 书 的 写作 期 间 给 予 我 们 帮助 和 鼓励 的 朋友 们 , 还 有 那些 志同道合 
的 EXT 爱 好 者 们 。 


徐 会 生 何 启 伟 康 爱 媛 
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本 章 内 容 

口 EXT 了 版 本 变迁 

D 下 载 EXT 发 布 包 

日 如 何 查看 EXT 自 带 的 API 和 示例 

-为 什么 有 些 示例 必须 放 在 服务 器 上 才能 看 到 效果 
OD Hello World 

9 为 什么 页 面 提示 “ 找 不 到 图 片 ” 

口 辅助 开发 


1.1 EXT 版 本 变迁 


在 正式 介绍 EXT 的 详细 功能 之 前 ， 先 让 我 们 了 解 一 下 其 各 个 版 本 的 功能 变迁 ， 从 这 些 版 本 变 
动 历史 中 可 以 对 EXT 的 进化 历程 有 一 个 大 致 的 了 解 。 

口 EXT 1.0 发 布 于 2007 年 2 月 , 这 标志 着 EXT 正 式 从 YUI 社 区 中 独立 出 来 , 不 再 仅仅 支持 YUI， 
而 是 提供 了 ext-baes、prototype、jquery 和 YUI4 种 底层 实现 。 这 个 版 本 提供 了 基本 的 表格 、 
树 形 、 表 单 、 窗 口 和 布局 组 件 。EXT 采 取 多 协议 发 布 方式 ， 用 户 可 以 选择 在 LGPL 协 议和 
企业 协议 下 使 用 EXT。 

口 EXT2.0 发 布 于 2007 年 12 月 ， 这 次 大 版 本 升级 重 写 了 核心 组 件 部 分 ， 简化 了 组 件 的 布局 和 
配置 。 EXT2.0 之 后 我 们 可 以 使 用 1ayout 和 items 属 性 更 加 方便 地 实现 各 种 复杂 布局 ， 而 
且 EXT 2.0 中 也 提供 了 许多 功能 强大 的 布局 方式 ， 比 如 EXT 1.x 中 的 Accordian 布 局 方式 ， 
已 经 成 为 EXT 2.0 默 认 发 布 包 的 一 部 分 了 。 

口 EXT 2.1 发 布 于 2008 年 4 月 ， 这 次 版 本 升级 包括 对 REST 的 支持 ， 并 提供 了 一 些 扩展 组 件 。 
不 过 这 次 版 本 升级 做 出 的 最 大 改变 是 对 开源 协议 的 修改 。 自 EXT 2.1 之 后 ， 所 有 未 付费 的 
用 户 都 只 能 在 GPL 协议 下 才能 使 用 EXT， 也 就 是 说 EXT 2.1 以 及 之 后 的 版 本 都 无 法 直接 用 
于 商业 项 目 ， 必 须 向 EXT 缴 费 购买 商业 授权 才能 在 商业 产品 中 使 用 EXT。 

Q EXT 2.2 发 布 于 2008 年 8 月 ， 这 个 版 本 提供 了 对 浏览 器 Firefox 3x 的 支持 ， 并 提供 了 多 种 高 
级 表单 输入 控件 ， 比 如 可 以 实现 单 选 多 选 框 横 排 的 RadioGroup 和 CheckboxGroup， 多 选 列 
表 MultiSelect 和 ItemSelector 以 及 文件 上 传 组 件 FileUploadField。 
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D EXT2.2.1 发 布 于 2009 年 2 月 , 这 个 版 本 提供 了 对 Chrome 浏 览 器 的 支持 , 解决 了 一 些 内 存 泄 
露 问 题 ， 并 为 Container 提 供 了 removeA1l11) 函数 ， 可 以 直接 清空 容器 内 的 所 有 组 件 ， 同 
时 提供 了 多 种 AIR 下 的 扩展 组 件 。 

D EXT 3.0 发 布 于 2009 年 6 月 ，EXT3.x 中 最 主要 的 变化 就 是 重 构 并 提炼 了 Ext Core， 同时 重 写 
了 Button 和 Toolbar， 使 EXT 3.x 中 的 按钮 和 工具 条 都 可 以 实现 多 种 显示 方式 ， 如 自动 填充 、 
图 文 混 排 ， 并 对 工具 条 提供 了 溢出 控制 。 

口 EXT 3.1 发 布 于 2009 年 12 月 ， 这 是 日 前 最 新 的 一 个 发 布 版 本 了 ， 此 版 本 中 最 大 的 变化 是 对 
性 能 的 提升 ， 并 解决 了 单 页 面 应 用 长 期 使 用 时 出 现 的 内 存 泄露 问题 。 

从 上 面 这 些 版 本 变迁 历史 中 可 以 看 出 ，EXT 最 初 以 一 个 扩展 组 件 库 的 形式 发 展 起 来 ， 然 后 逐 
渐 独 立 发 展 。EXT 1.0 发 布 时 已 经 拥有 了 比较 成 熟 的 各 种 组 件 。EXT 1.0 至 EXT 2.0 的 版 本 升级 过 
程 中 实现 了 对 整体 组 件 的 重 构 ， 实 现 了 更 加 简易 的 配置 和 布局 方式 。 从 EXT 2.0 之 后 ，EXT 的 发 
展开 始 进入 平稳 状态 ， 每 次 升级 都 只 是 提供 一 些 扩展 组 件 和 对 bug 的 修改 。 也 是 因为 EXT2.0 中 的 
组 件 结构 已 经 相当 成 熟 ， 所 以 EXT 2.0 到 EXT3.0 并 没有 经 历 像 EXT 1.0 到 EXT 2.0 的 巨大 动荡 ， 只 
需要 对 原 有 代码 进行 少量 修改 就 可 以 实现 平滑 升级 。EXT 2.x 至 EXT 3.x 的 版 本 升级 主要 体现 在 核 
心 组 件 的 重 构 并 提取 了 Ext Core， 而 真正 振奋 人 心 的 还 是 EXT 3.1 版 本 的 发 布 ， 因 为 EXT 3.1 中 ， 
EXT 团 队 终 于 开始 解决 性 能 和 内 存 泄 露 方面 的 问题 了 , 并 对 外 宣称 在 一 些 场景 下 可 以 实现 5$0 倍 的 
性 能 提升 ， 只 此 一 点 就 可 以 让 之 前 抱怨 项 目 性 能 问题 的 开发 者 放心 了 。 

我 们 从 这 些 变迁 历史 中 可 以 切实 感觉 到 , EXT 已 经 经 历 了 从 加 强 功能 结构 成 熟 性 发 展 到 加 强 
整体 架构 和 稳定 的 过 渡 ， 这 也 说 明 EXT 的 功能 已 经 足够 强大 了 ， 今 后 它 会 向 更 快 、 更 稳定 的 方面 
努力 。 


1.2 下 载 EXT 发 布 包 


很 高 兴 可 以 带领 大 家 走 进 EXT 的 世界 ! EXT 是 一 款 富 客户 端 开发 框架 ， 它 基于 JavaScript、 
HTML 和 CSS 开 发 而 成 ， 无 需 安 装 任何 插件 即 可 在 常用 浏览 器 中 创建 出 绚丽 的 页 面 效果 。 非 常 幸 
运 的 是 ， 我 们 可 以 从 www.extjs.com/download 免 费 获 得 EXT 发 布 包 ， 其 中 源 代码 、API 文 档 和 示例 
一 应 俱全 。 不 过 ， 如 果 想 通过 访问 SVN 获 得 最 新 的 代码 ， 就 得 花 钱 了 。 为 学 习 之 用 ， 我 们 现 阶段 
只 需要 这 个 免费 的 发 布 包 ， 通 过 其 中 的 范例 ， 我 们 可 以 感受 一 下 EXT 的 魅力 。 

EXT 的 作者 Jack Slocum” 在 2.2 版 本 之 后 对 EXT 的 开源 协议 进行 了 修改 , 而 且 从 3.0 版 本 之 后 又 
改 成 了 只 对 付费 用 户 提供 补丁 维护 版 本 ， 因 此 我 们 能 从 www.extjs.com 上 下 载 到 的 免费 最 新 版 本 
是 EXT 3.1。 


1.3 如何 查看 EXT 自 带 的 API 和 示例 


EXT 发 布 包 中 的 API 文 档 放 在 docs 目 录 下 ， 虽 然 可 以 看 到 左边 的 菜单 ， 但 是 点 击 之 后 ， 右 侧 
的 API 页 面 都 是 通过 Ajax 方式 获得 的 ， 不 能 直接 在 本 地 查看 ， 必 须 把 解压 缩 后 的 完整 目录 部 署 到 


Jack Siocum， 美 国人 ，EXT 框 架 之 父 ， 首 席 软件 设计 师 。 个 人 博客 : http://www.jackslocum.com/。 
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服务 器 上 ， 然 后 通过 浏览 器 访问 服务 器 ， 这 样 才 能 看 到 。 如 果 没 有 把 这 些 内 容 放 在 服务 器 上 ， 则 
docs 就 会 打 不 开 ， 只 能 看 到 图 1-1 的 界面 。 


录 亏 多 称 榴 述 








图 1-1 通过 Ajax 方 式 无 法 从 本 地 文件 系统 获取 数据 


API 文 档 中 的 官方 示例 可 以 在 APIHome 中 找到 ， 也 可 以 在 浏览 器 中 直接 打开 examples 目 录 下 
的 samples.html。 当 然 ， 有 一 些 示 例 需要 放 在 服务 器 上 才能 看 到 效果 。 有 一 些 示例 的 后 台 代 码 是 使 
用 PHP 编 写 的 ， 如 果 想 查看 这 些 示例 的 效果 ， 还 需要 配置 PHP 运 行 环境 。 

如 果 你 用 Java， 而 且 JDK 的 版 本 在 1.5 以 上 ， 那 么 建议 你 安装 resin-3， 因 为 可 以 直接 在 它 上 面 
运行 PHP 示 例 。 


1.4 为 什么 有 些 示 例 必 须 放 在 服务 器 上 才能 看 到 效果 


有 些 示例 用 Ajax 从 后 台 读 取 数 据 ， 如 果 该 示例 不 在 服务 器 上 ，Ajax 就 会 一 直 返 回 失败 状态 ， 
从 而 无 法 获得 任何 数据 ， 所 以 就 看 不 到 正确 的 效果 。 不 过 ， 在 www.extjs.com 网 站 的 论坛 上 曾经 
有 人 写 了 localXHR， 可 以 通过 Ajax 方 式 从 本 地 文件 系统 获得 数据 ， 这样 也 许 就 可 以 摆脱 服务 器 的 
束缚 了 。 随 书 代码 中 包含 了 localXHR.js， 直 接 将 此 文件 复制 到 你 的 应 用 中 ， 即 可 实现 使 用 Ajax 从 
本 地 文件 系统 中 直接 获得 数据 。 


1.5 Hello World 
为 初学 者 考虑 ， 我 们 提供 了 两 个 入 门 版 的 Hello World 范 例 。 


1.5.1 直接 使 用 下 载 的 发 布 包 


如 果 你 已 经 从 http://www.extjs.com/download 下 载 了 EXT 的 zip 格 式 的 发 布 包 , 那么 可 根据 如 下 
步骤 来 使 用 它 。 

(1) 将 该 发 布 包 解 压缩 ， 其 目录 结构 应 该 如 图 1-2 所 示 ， 各 目录 的 用 途 简要 介绍 如 下 。 

口 adapter 目 录 下 是 EXT 的 核心 代码 和 底层 库 ， 包 括 jQuery、Prototype 和 YUI 的 适配器 。 

口 docs 目 录 下 是 EXT 的 文档 ， 其 实 最 主要 和 最 重要 的 是 EXT 的 API，EXT 开 发 中 离 不 开 它 。 

Dexamples 目 录 下 是 官方 的 演示 示例 ， 是 初学 者 学 习 EXT 的 最 佳 途径 之 一 。 

Q pkgs 目 录 下 是 EXT 压 缩 后 的 代码 ， 经 过 压缩 的 代码 ， 体 积 更 小 ， 加 载 更 快 。 

口 resources 目 录 下 是 EXT 要 用 到 的 图 片 文 件 和 样式 文件 , EXT 绚丽 的 外 观 全 部 由 这 个 目录 中 

的 文件 控制 。 
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口 src 目 录 下 是 EXT 的 源码 文件 ， 也 就 是 相对 pkgs 目 录 而 言 ， 未 经 过 压缩 的 代码 。 

D ext-all.js 文 件 是 EXT 的 核心 库 ， 是 必须 引入 的 。 

口 ext-all-debug.js 文 件 是 ext-all.js 的 调试 版 , 在 调试 时 使 用 这 个 调试 版 本 的 文件 才能 正确 定位 

出 现 错 误 的 位 置 。 

D INCLUDE_ ORDER ,txt 文件 用 来 说 明 在 页 面 上 引用 底层 库 的 JavaScript 文 件 的 顺序 。 

口 LICENSE.txt 文 件 是 EXT 的 使 用 许可 文件 。 

(2) 利用 它 的 目录 结构 编写 一 个 Hello World 示 例 。 

进入 图 1-2 中 的 examples 目录 2， 新 建 一 个 helloworld 目 录 ， 在 helloworld 目 录 下 新 建 一 个 
helloworld.html 文 件 ， 将 下 面 的 代码 复制 到 这 个 文件 中 。 


<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
<script type="text/javascript* src="../../adapter/ext/ext-base.js"></script> 
<script type="text/javascript* src="*../../ext-all.js"></script> 
<Script type="text/javascript" src="../examples.js"></script> 
<Sscript> 
Ext .onReady (function()t{ 
Ext .MessageBox.alert{'helloworld', ‘Hello World.'); 
}: 
</script> 


(3) 双击 打开 helloworld.html 文 件 ， 其 效果 如 图 1-3 所 示 。 


Cadapter | 
I docs 
LL examples 


Crkes 


[Oresources 


a) src 
[车 ]ext-all. js helloworid x 
| 器 |ext-all-debug js Hello World, 

月 INCLYDE_ORDER. txt 


关 license. txt 


图 1-2 EXT 发 布 包 解 压 后 的 目录 结构 图 1-3 ”Hello Worid 示 例 


很 高 兴 地 告诉 你 ， 我 们 的 Hello World 示 例 已 经 正确 地 执行 了 。 建 议 你 接 下 来 把 examples 目 录 
下 的 示例 都 看 一 看 , 并 研究 一 下 其 中 的 代码 是 如 何 写 的 , 好 好 感受 一 下 EXT 的 风格 , 然后 再 继续 。 


1.5.2 在 项 目 中 使 用 EXT 


如 果 想 把 EXT 应 用 到 项 目 中 , 那么 需要 自己 整理 一 下 , 因为 发 布 包 里 的 内 容 并 非 都 是 必需 的 ， 
比如 文档 、 示 例 和 源 代码 。 必 和 需 内 容 至 少 应 包括 : ext-all.js、adapter/ext/ext-base.js、src/locale/ext- 
lang-zh_CN.js 和 整个 resources 目 录 。 


QD 打开 光盘 ， 进 入 ext-3.0.0 下 的 examples 文 件 夹 ， 本 章 的 实例 放 在 01.0overview 文 件 夹 下 。 
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口 ext-alljs 和 adapter/ext/ext-base.js 已 经 包含 了 EXT 的 所 有 功能 , 所 有 的 JavaScript 脚 本 都 在 这 里 。 
口 src/locale/ext-lang-zh_CN.js 是 简体 中 文 国际 化 资源 文件 。 
D resources 目 录 下 是 CSS 样 式 表 和 图 片 。 

只 要 自己 的 项 目 中 包含 上 述 内 容 ， 就 可 以 使 用 EXT 了 。 使 用 时 ， 在 页 面 中 导入 下 面 的 代码 : 


<link rel="stylesheet" type="text/css" href="${ 放 置 ext 的 目录 }/resources/css/ext-all.css"/> 
<script type="text/javascript" src="${ 放 置 ext 的 目录 }/ext-base.js"></script> 

<script type="text/javascript" src="${ 放 置 ext 的 目录 }/ext-all.js"></script> 

<script type="text/javascript" src="${ 放 置 ext 的 目录 }/ext-lang-zh_CN.js"></script> 


导入 时 ， 请 注意 JavaScript 脚 本 的 顺序 。 
1.6 为 什么 页 面 提示 “ 找 不 到 图 片 ” 


EXT 里 经 常用 一 张 空白 图 片 作为 占 位 符号 ， 然 后 用 CSS 里 配置 的 背景 图 片 显示 ， 这 样 有 利于 
更 换 主 题 。 这 张 空白 图 片 的 名 字 就 是 Ext.BLANK IMAGE URL， 默 认 情 况 下 它 的 值 是 
BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif "。 图 片 虽然 很 小 ， 但 是 也 需要 从 网 上 
下 载 ， 一 旦 下 载 失败 ， 就 会 显示 找 不 到 图 片 。 

看 到 这 里 ， 可 能 有 人 会 觉得 奇怪 ， 为 什么 examples 目 录 下 的 示例 会 出 现 找 不 到 图 片 的 情况 
呢 ? 如 果 你 提出 这 样 的 问题 ， 证 明 你 没有 仔细 研究 那些 示例 的 代码 ， 每 个 示例 都 引用 
了 .shared/examplesjs， 在 这 个 examplesjs 的 第 一 行 就 已 经 设置 了 Ext.BLANK_IMAGE_URL = 
',../../resources/images/default/s.gif ';。 所 以 ， 要 解决 自己 写 的 示例 找 不 到 图 片 的 问 
是 ， 只 和 需要 参照 examples.js 中 的 方法 ， 修 改 自 己 项 目 中 的 s.gif 的 本 地 路 径 即 可 。 


1.7 辅助 开发 


在 软件 开发 中 ， 经 常会 使 用 辅助 开发 工具 ， 因 为 辅助 工具 能 提高 开发 效率 ， 甚 至 可 以 达到 事 
半 功 倍 的 效果 。 尤其 是 像 JavaScript 这 样 的 解释 型 脚本 语言 ， 开 发 和 调试 过 程 都 非常 困难 ， 需 要 强 
有 力 的 工具 加 以 支持 。 下 面 将 介绍 在 EXT 开 发 中 用 得 最 多 的 调试 工具 和 IDE。 


1.7.1 调试 工具 Firebug 


由 于 我 们 对 Firefox 的 偏爱 ， 以 及 Firebug 在 调试 JavaScript 过 程 中 的 便利 ， 推 荐 你 使 用 Firefox 
和 Firebug 进 行 EXT 的 开发 调试 。 实 际 上 ，EXT 开 发 者 也 都 倾向 于 使 用 Firefox 进 行 开发 ， 因 为 有 些 
应 用 在 Firefox 上 运行 良好 ， 在 了 芷 中 运行 却 会 出 现 这 样 或 那样 的 问题 。 只 是 ， 目 前 IE 占据 大 约 60% 
的 浏览 器 市 场 份额 ， 所 以 我 们 还 是 需要 让 自己 的 项 目 能 在 IE 中 正常 运行 ， 这 要 求 我 们 能 编写 出 跨 
浏览 器 的 JavaScript 代 码 。 

Firebug 的 好 处 在 于 ， 它 可 以 显示 动态 生成 的 DOM， 甚 至 可 以 在 Firebug 里 直接 对 DOM 进 行 修 
改 ， 而 这 些 修 改 会 反映 到 显示 页 面 上 。 

通过 Firebug 提 供 的 控制 台 ， 可 以 直接 执行 JavaScript 脚 本 ， 也 可 以 在 JavaScript 代 码 中 使 用 
console.debug{()、console.info() 和 console.error() 等 日 志方 法 ， 便 于 调试 和 跟踪 。 
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Firebug 可 以 查看 以 Ajax 方式 发 送 和 接收 的 各 种 信息 , 还 可 以 查看 发 送 的 参数 以 及 返回 的 状态 
和 信息 。 下 面 将 介绍 Firebug 的 安装 和 使 用 。 

首先 下 载 Firebug， 如 果 你 使 用 的 是 Firefox 3.5 以 上 的 版 本 ， 就 必须 下 载 Firebug 1.4 以 上 的 版 
本 ， 否 则 会 不 兼容 。 如 图 1-4 所 示 ， 在 官方 网 站 点 击 下 载 链接 ，Firefox 会 自动 提示 安装 插件 ， 等 
待 安装 完成 ， 重 启 Firefox 之 后 就 可 以 使 用 Firebug 了 。 

安装 完成 后 ， 在 Firefox 的 工具 栏 上 单 击 “查看 ”选项 ， 便 会 看 到 Firebug， 选 中 它 就 可 以 开始 
调试 了 ， 如 图 1-5 所 示 。 
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图 1-4 ”在 官方 网 站 下 载 并 安装 Firebug 图 1-5 Firebug 的 调试 页 面 


从 图 1-5 中 可 以 看 出 ，Firebug 面 板 的 最 上 方 有 6 个 选项 卡 ， 点击 这 些 选 项 卡 就 可 以 使 用 对 应 的 
功能 操作 。 在 浏览 器 下 方 状态 栏 的 右 侧 可 以 看 到 一 个 昆虫 图 标 ， 这 就 是 Firebug 的 图 标 ， 当 图 标 颜 
色 为 灰色 时 ， 表 明 Firebug 处 于 未 启用 状态 。 下 面 将 详细 介绍 这 些 选项 卡 的 功能 。 

9 控制 台 : 控制 台 会 输出 代码 中 的 错误 ， 并 且 可 查看 错误 的 详细 信息 ， 还 可 以 直接 在 下 方 

的 命令 栏 中 执行 JavaScript 脚 本 。 同 时 ， 右 下 角 Firebug 图 标的 位 置 也 会 显示 脚本 错误 的 数 
量 ， 如 图 1-6 所 示 。 


i N_i 
3 ) 清除 “保持 “向 沈 


Wy RTOTEODEeETTOr: ds IF BO aORFINed 1 es WS 1 NOT derinea a| 

more... } 

>> 旭 
人 eferenceError: 4 is not defined { eesgnee="d is not defined”, ImOore 

) console, rrorli) 
Os1 

with [ FirebueCommandLine) {\n 19 《第 1 行 ) wv 

i le ep a ER 
完成 各 1 个 构 误 “ 


图 1-6 ”控制 台 输出 错误 信息 
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口 HTML: HTML 查 看 器 。 通 过 它 可 以 查看 页 面 的 源 代码 ， 这 里 的 源 代码 包括 页 面 中 引用 的 
所 有 JavaScript 脚 本 和 CSS 样 式 代 码 。 也 可 以 单 击 宣 按钮， 再 单 击 选择 上 方 页 面 的 显示 区 
域 ， 将 选中 的 页 面 元 素 自动 显示 在 HTML 选 项 卡 中 。HTML 查 看 器 面板 的 右 侧 还 提供 了 碍 
看 布局 的 功能 ， 这 里 提供 了 可 视 化 的 CSS 标 尺 。 当 在 Firebug 中 查看 页 面 中 某 一 区 域 的 CSS 
样式 表 时 ， 它 会 以 标尺 的 形式 将 当前 区 域 占用 的 面积 (以 像素 为 单位 ) 清楚 地 标记 出 来 。 
而 且 还 能 在 这 个 可 视 化 的 界面 中 直接 修改 各 面积 的 像素 值 ， 页 面 上 各 区 域 的 位 置 就 会 随 
之 变化 。 当 页 面 中 某 些 元 素 出 现 错位 时 ， 可 以 在 这 里 分 析 外 边 距 、 边 框 、 内 边 距 和 元 素 
大 小 之 间 的 关系 ， 如 图 1-7 所 示 。 . 





a 
注重 vg himl | 桥 椒 神 六 出 的 精 坏 > 布局 ~ | jx 


-= “htm]} 





图 1-7 查看 元 素 的 布局 信息 


DCSS: CSS 调 试 器 。 调 试 CSS 样 式 ， 通过 右 侧 的 样式 标签 可 以 查看 HTML 元 素 使 用 的 样式 。 
可 以 在 这 里 直接 添加 、 修 改 、 删 除 CSS 样 式 表 的 属性 ， 而 且 可 以 在 页 面 中 直接 看 到 修改 后 
的 结果 ， 如 图 1-8 所 示 。 


> ue »# 6 1 
志 Css 7 和 07 科 次 (eid 
编辑 | ext-al1 css- 
html, body, div, Al, dt, dd ul, ol, 11, hi, h2, hs, hd4, hs, 二 
h5，Dre，form，flieldset，inrpat，D，blockaquote th +d 1 
markEln 0-. 
paddlirg 


img, body, html 1 
bord 0 none 
] 


到 
图 1-8 CSS 调试 器 

口 脚本 : JavaScript 脚 本 调试 器 。 在 其 中 可 以 为 JavaScript 脚 本 设置 断 点 进行 单 步调 试 ， 右 侧 
还 提供 了 查看 变量 的 窗口 ， 如 图 1-9 所 示 。 

DOM: DOM 查 看 器 。 查 看 浏览 器 中 的 所 有 DOM 节 点 ， 包 括 由 EXT 自 动 创建 的 组 件 中 的 
DOM., 

D 网 络 : 网 络 状况 监视 。 它 能 将 页 面 载 入 CSS 样 式 文件 、JavaScript 脚 本 和 网 页 中 引用 的 外 
部 图 片 所 消耗 的 时 间 以 柱状 图 呈现 出 来 , 帮助 我 们 找 出 导致 网 页 访问 速度 变 慢 的 “元 多”， 
进而 对 网 页 进行 优化 ， 这 里 还 可 以 查看 HTTP 协 议 的 请 求 和 响应 信息 ， 如 图 1-10 所 示 。 
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图 1-10 网络 监视 器 


对 Firebug 的 介绍 就 讲 到 此 ， 在 使 用 EXT 时 ， 我 们 会 经 常 使 用 Firebug 来 进行 开发 调试 ， 如 何 
让 Firebug 在 实际 开发 中 发 挥 最 大 的 作用 ， 还 需要 大 家 在 实践 中 慢 慢 体会 。 


1.7.2 开发 利器 Spket 


Spket 是 一 款 全 面 支持 JavaScript、XUL/XBL、Flex、SVG 以 及 Yahoo! Widget 的 免费 开发 工具 。 
它 体积 小 巧 ， 只 有 5.6 MB， 目 前 最 新 版 本 是 1.6.18。 它 就 像 是 为 EXT 量 身 定 做 的 一 样 ， 既 可 以 作 
为 Eclipse 的 插件 ， 又 可 作为 独立 的 IDE。 下 面 将 介绍 Spket 的 安装 和 使 用 。 

需要 在 Spket 的 官方 网 站 http://www.spket.com/) 下 载 Eclipse 的 插件 (需要 在 Eclipse 3.2 以 上 
版 本 中 使 用 ) 或 独立 开发 IDE， 下 载 文件 为 spket-1.6.18.zip。 

先 介 绍 如 何 将 Spket 作 为 Eclipse 的 插件 来 使 用 。Eclipse 插 件 的 安装 方法 大 家 应 该 很 熟悉 。 首 
先 将 Spket 下 载 包 中 eclipse 文 件 夹 下 的 features 和 plugins 文 件 夹 复制 到 Eclipse 安装 目录 下 的 eclipse 文 
件 夹 中 ; 然后 启动 Eclipse， 依 次 进入 Windows 一 Preferences 选 项 , 在 窗口 的 左边 可 以 看 到 Spket 菜 单 
项 ， 其 中 包含 了 该 插件 的 相关 配置 。 选 中 JavaScript Profiles 选 项 ， 会 出 现 JavaScript 配 置 列表 ， 如 图 
1-11 所 示 。 默 认 情 况 下 ， 它 没有 提供 对 EXT 的 支持 ， 所 以 下 面 我 们 需要 将 EXT 库 添加 到 列表 中 。 

单 击 右 侧 的 New 技 钮 ， 在 弹出 的 窗口 中 输入 “EXT”， 单 击 OK 按 钮 便 可 以 看 到 EXT 的 名 字 已 
出 现在 列表 中 ， 如 图 1-12 所 示 。 
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图 1-11 ”Spket 插 件 目 录 结 构 
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1-12 JavaScript 列 表 


选择 EXT 库 列表 ， 再 单 击 右 侧 的 Add Library 按 钮 ， 在 弹出 的 窗口 中 选择 ExUs， 然 后 单 击 OK 
按钮 ， 便 会 看 到 EXT 库 列表 下 成 功 添加 了 ExtJs 类 库 ， 如 图 1-13 所 示 。 
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type filter taxt JavaScript Profiles 
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图 1-13 ”ExtJs 类 库 列 表 


选中 ExtJs 库 列表 ， 单 击 右 侧 的 Add File 按 钮 ， 便 可 以 上 传 库 文件 ， 如 图 1-14 所 示 。 

选择 extjsb 文 件 并 打开 ， 可 以 看 到 ExtJs 类 库 列 表 下 多 了 很 多 文件 。 默 认 选 择 了 Ext Base 和 
Everything，Ext Base 是 EXT 的 核心 库 ，Everything 中 包含 了 EXT 的 source 目 录 下 的 所 有 JavaScript 
文件 ， 如 图 1-15 所 示 。 
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图 1-14 选择 上 传 EXT 工 程 文件 图 1-1$ ”ExtJs 库 文件 列表 
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到 这 里 ，Spket 插 件 的 安装 和 配置 就 已 经 完成 了 。 下 面 我 们 就 来 体验 一 下 Spket 的 使 用 效果 ， 
它 可 以 实现 EXT 的 代码 提示 ， 如 图 1-16 所 示 。 如 果 没 有 提示 ， 需 要 选中 EXT 库 列表 ， 再 单 击 右 侧 
的 Default， 这 一 步 是 必 不 可 少 的 。 
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图 1-16 ”Spket 插 件 的 代码 提示 


再 介绍 一 下 将 Spket 作 为 一 个 独立 IDE 的 使 用 方式 。 作 为 独立 的 IDE,Spket 需 要 运行 在 JDK 1.5 
版 以 上 ， 下 载 文件 为 spket-1.6.18.jar， 安 装 步骤 如 下 。 

(1) 打开 操作 系统 的 命令 行 窗口 cmd 控制 台 )。 

(2) 进入 spket-1.6.18.jar 文 件 目录 ， 输 入 java -jar spket-1.6.18.jar。 

(3) 回 车 后 便 可 看 到 安装 画面 ， 这 里 需要 选择 将 Spket 作 为 Eclipse 的 插件 还 是 独立 作为 独立 的 
IDE 运 行 ， 我 们 这 里 选择 后 者 ， 如 图 1-17 所 示 。 
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图 1-17 安装 Spket IDE 


然后 一 步 一 步 往 下 安装 即 可 ， 安 装 完成 后 会 看 到 一 个 和 Eclipse IDE 非 常 像 的 界面 ， 使 用 方式 
也 基本 相同 ， 如 图 1-18 所 示 。 
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图 1-18 ”Spket IDE 的 使 用 界面 
将 Spket IDE 安 装 完 后 ， 我 们 可 以 按照 之 前 介绍 的 在 Eclipse 插件 中 使 用 EXT 的 方式 ， 对 Spket 
IDE 进 行 配置 ， 这 样 就 可 以 在 Spket 中 使 用 EXT 进 行 开 发 了 。 
除 Spket 之 外 ， 在 EXT 开 发 时 用 得 较 多 的 IDE 还 有 JSEclipse 以 及 Apatana， 在 此 就 不 一 一 介绍 了 。 


1.8 小 结 


本 章 主要 介绍 了 如 何 下 载 和 使 用 EXT 发 布 包 ， 以 及 查看 EXT 自 带 的 API 和 示例 ， 并 带领 大 家 
制作 了 第 一 个 EXT 示 例 一 一 Hello World。 同 时 讨论 了 在 最 初 使 用 EXT 时 有 可 能 遇 到 的 一 些 问题 ， 
并 介绍 了 两 款 常 用 的 辅助 开发 工具 一 一 Firefox 的 Firebug 和 Spket。 
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本 章 内 容 
D EXT 的 事件 和 类 
口 EXT 的 核心 组 件 


2.1 ”EXT 的 事件 和 类 


事件 模型 在 EXT 应 用 中 有 着 尤为 重要 的 作用 。EXT 中 的 事件 分 为 两 种 类 型 : 自 定义 事件 和 浏 
览 器 事件 。 


2.1.1 自 定义 事件 


EXT 中 遵循 一 种 树 状 的 事件 模型 ， 所 有 继承 自 Ext .util .Observable 类 的 控件 都 可 以 支持 
事件 。 可 以 为 这 些 继承 了 Exk .util.0bservable 的 对 象 定义 一 些 事 件 ， 然 后 为 这 些 事件 配置 监 
听 器 。 当 某 个 事件 被 触发 时 ，EXT 会 自动 调用 对 应 的 监听 器 ， 这 些 就 是 EXT 的 事件 模型 。 

下 面 通过 继承 Ext .util.o0bservable 来 实现 一 个 支持 事件 的 对 象 ， 实 现 过 程 如 代码 清单 2-1 
所 示 。 


代码 清单 2-1 Person 类 


Person = functioni{iname) { 
this.name = name; 
this.addEvents{"walk", "eat", "sleep'"); 
} 
Ext .extend (Person, Ext .utii.Observable, { 
info: function{tevent)} { 
return this.name + is + @vent + 'ing.'} 
} 
曙 电 | 


以 上 代码 实现 了 一 个 名 称 为 Person 的 对 象 ， 它 有 一 个 属性 name 。 初 始 化 时 ， 调 用 
this.addqgvents() 函 数 定义 了 3 个 事件 : walk、eat 和 sleep, 然后 使 用 Ext .extend() 让 Person 
继承 Ext .util.0bservable 的 所 有 属性 。 此 外 , 还 加 上 了 函数 info(), 让 它 返回 Person 的 信息 。 
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接 下 来 该 如 何 做 呢 ? 

我 们 在 HTML 中 创建 一 个 Person 的 实例 ， 然 后 为 它 的 事件 配置 好 监听 器 ， 如 代码 清单 2-2 所 
示 。 
代码 清单 2-2 ”为 person 添 如 事件 监听 回 


var person = new Person('Lingo'); 
person ,on ('walk'，functionf() { 
Bxt.Msg.alert('event'，person,name + "在 走 啊 走 啊 。" ) ; 
了 
person.on('eat', function{breakfast, lunch, supper) { 
Ext .Msg.alert ('event', person.name+'" 要 吃 "+breakfast+", "+lunch+" 和 "+supper+"。"); 
}}; 
person.on('sleep', function(time) { 
Ext .Msg.alert ('event', person.name + "从 "+ time.format{"H") + "点 开始 睡觉 啦 。") ; 
3 汪 


这 里 的 on () 是 aaaListener() 的 简写 形式 ， 功 能 完全 一 样 。 第 一 个 参数 传递 事件 名 称 ， 第 
二 个 参数 是 事件 发 生 时 执行 的 函数 。 为 简单 起 见 ， 我 们 在 这 里 全 部 写成 alert 形 式 。 

现在 准备 工作 都 已 就 绪 , 在 这 些 事件 被 触发 时 就 可 以 看 到 效果 了 。 可 怎么 触发 事件 呢 ? 为 了 
使 于 控制 ， 我 们 设置 3 个 按钮 ， 在 按钮 按 下 时 ， 就 会 触发 相应 的 事件 ， 如 代码 清单 2-3 所 示 。 


代码 清单 2-3 ”触发 person 的 事件 


Ext .get (‘walk'})} .on{'click', function() 1 
person.fireEvent (‘walk’'),; 
}); 


Ext .get ('eat').on('click', function{() { 
person.fireEvent('eat',，' 早 和 父 '，' 中 和 餐 '，' 了 晚餐 '); 
sy 


Ext.get('sleep') .on('click', function(} { 
person.fireEvent('sleep', new Date()); 
地 


接着 调用 fireEvent () 就 会 触发 事件 , 传 入 一 个 事件 名 称 作为 参数 ， 该 事件 对 应 的 监听 函数 
就 会 执行 。 

下 面 要 讲 的 是 只 有 动态 语言 才 有 的 特性 。 如 果 想 给 监听 方法 传递 参数 ， 直接 把 参数 写 到 
fireEvent () 里 就 行 了 ， 不 用 管 参数 数量 ， 也 不 用 管 参数 类 型 (字符 串 、 数 字 、 日 期 、 数 组 等 )。 
不 过 ， 需 要 确保 监听 函数 可 以 处 理 你 传递 过 去 的 参数 。 如 果 监 听 函 数 需 要 某 个 参数 ， 触发 事件 时 
却 筷 了 传递 过 去 ， 这 时 就 会 报告 错误 。 这 种 因为 动态 语言 的 特性 而 导致 的 非 直观 错误 非常 难以 
查找 。 

正如 on 是 adaaListener 的 简写 ，removeListener 的 简写 形式 是 un。 你 可 以 用 它 删 除 某 个 事 
件 对 应 的 监听 函数 ， 具 体操 作 如 下 面 的 代码 所 示 。 


var fn = function() { 


Download at Pin5i.Com 


http://52pdf.taobao.com 


2.1 EXT 的 事件 和 类 15 


a TODG: 
} 
person.on(l'walk’', fn); 
person.un{('walk', fn) 


还 有 一 个 purgeListeners() 函数， 它 可 以 把 所 有 的 监听 器 都 删除 掉 。 请 注意 ， 是 所 有 的 监 
昕 器 ， 一 旦 调用 了 这 个 函数 ， 所 有 的 事件 都 不 起 作用 了 。 因 此 ， 一 定 要 慎 用 。 


2.1.2 浏览 器 事件 


浏览 器 事件 即 传统 意义 上 的 鼠标 单 击 、 移 动 等 事件 ， 是 由 浏览 器 根据 用 户 的 动作 触发 的 ， 与 
页 面 元 素 紧密 相关 。EXT 使 用 Ext .EventManager、Ext .EventObject 和 Ext .1ib.Event 对 原生 
浏览 器 事件 进行 了 封装 ， 最 后 展现 在 我 们 面前 的 就 是 一 套 统 一 的 跨 浏 览 器 的 通用 事件 接口 。 

也 许 有 的 读者 会 问 ，HTML 元素 本 身 已 经 支持 事件 ， 为 什么 还 要 再 重新 设计 一 套 事件 机 制 ? 
实际 上 ， 基 本 上 所 有 的 JavaScript 框 架 都 会 实现 自己 的 事件 机 制 。 原 因 很 多 ， 但 是 有 一 点 很 重要 : 
HTML 元 素 对 事件 的 处 理 是 通过 简单 的 单一 绑 定 实现 的 。 也 就 是 说 ， 如 果 不 进 行 任何 封装 ， 事 件 
只 能 绑 定 到 一 个 事件 处 理 句柄 ， 如 下 面 的 代码 所 示 。 


Var e=dGocument .getElementBylId("test"); 
e.onclick=function() talert ("handlel")}; 
e.onclick=function() {alert ("handle2")}; 


运行 上 述 代 码 后 你 会 发 现 ， 单 击 test 按 钮 后 只 会 弹出 一 个 显示 handle2 的 提示 框 ， 因 为 第 一 个 
事件 已 经 被 第 二 个 事件 米 盖 了 。 然 而 ， 使 用 EXT 框 架 ， 你 就 不 用 担心 这 个 问题 ， 同 一 个 事件 可 以 
依次 被 绑 定 到 多 个 事件 处 理 句柄 上 ， 如 下 面 的 代码 所 示 。 


Ext .onReady (functiont{})1 
VaE test :=: Extiget'l'tegst'); 
est Gn(t eliek",. uationtk A 
alert ("handlel"); 
下 学 
est.on('clLick'，Efunction() ({ 
alert ("handle2"); 
EF}? 
}}3 
首先 使 用 Ext .get ('test') 获得 HTML 中 ia="test" 对 应 的 按钮 ， 然 后 使 用 on ('click'， 
function{){}) 的 形式 为 它 添加 两 个 监听 函数 ,这 两 个 函数 会 在 触发 单 击 (click) 事件 时 依次 执 
行 ， 不 会 出 现 覆 盖 的 问题 。 
下 面 我 们 来 单独 分 析 一 下 EXT 事 件 模型 的 几 个 主要 组 成 部 分 ， 并 讨论 它们 的 常用 功能 。 


2.1.3 Ext .1ib .Event 


Ext .1ib.Event 是 定义 在 adapter 中 的 工具 类 , 它 封装 了 不 同 浏览 器 的 事件 处 理 函 数 ， 为 上 
层 组 件 提供 了 统一 的 功能 接口 。 
对 于 定义 在 adapter 中 的 适配器 工具 ，EXT 自 带 的 文档 中 没有 任何 关于 这 个 类 函数 的 说 明 ， 





Download at Pin5i.Com 


http://52pdf.taobao.com 


16 第 2 章 EXT 框 架 基础 


而 且 在 实际 中 也 很 少 直接 用 到 这 个 类 , 只 是 与 事件 相关 的 那些 操作 最 后 都 会 归结 为 对 这 些 底层 函 
数 的 调用 。 
Ext .1ib.Event 中 定义 了 以 下 几 个 主要 的 函数 。 
Q getx{)、getY()、getxY() 获 得 发 生 的 事件 在 页 面 中 的 坐标 位 置 ，getxY () 返回 的 是 一 
个 数组 。 如 果 希 望 获得 对 应 的 x-、y 坐 标 ， 则 需要 使 用 getXY () [0] 和 getxY() [1] 的 形式 ， 
getXY() [0] 代 表 x 坐 标 ，getxY (0) [1] 代 表 y 坐 标 。 
D getTarget () 返 回 事件 的 目标 元 素 ， 该 函数 用 来 统一 正和 其 他 浏览 器 使 用 的 ev .carget 
和 ev.srcElement。 
on() 和 un() 我 们 之 前 已 经 提 到 过 ，on () 用 于 将 事件 监听 函数 绑 定 到 元 素 对 应 的 事件 上 ， 
un() 则 执行 反 操作 , 将 事件 监听 函数 从 元 素 上 清除 , 而 purgeElement () 函数 会 把 元 素 上 
的 所 有 事件 都 清除 。 
D preventDefault() 函数 用 于 取消 浏览 器 对 当前 事件 所 执行 的 默认 操作 。 例如, 在 自 定义 
右键 菜单 时 就 需要 使 用 这 个 函数 ， 防 止 单 击 鼠标 右键 时 弹出 浏览 器 自身 的 右键 菜单 。 
DO stopPropagation() 函 数 的 作用 是 停止 事件 传递 ， 这 是 与 浏览 器 中 HTML 元 素 事件 的 传 
递 机 制 相 关 的 。 内 层 的 HTML 元 素 触 发 的 元 素 会 传递 外 层 的 HTML 元 素 ， 调 用 
stopPropagation() 函 数 会 中 断 这 个 传递 过 程 。 
如 果 我 们 希望 停止 一 个 事件 ， 可 以 调用 stopEvent () 函数 。 其 内 部 调用 了 prevent- 
Default () 和 stopPropagation() 两 个 函数 ， 取 消 了 浏览 器 的 默认 操作 ， 同 时 停止 了 事 
件 传 递 。 
onAvailapble() 函数 有 3 个 参数 : ida、fn 和 scope。 它 的 作用 是 等 到 id 对 应 的 HTML 元 素 
可 用 时 才 执 行 fn 这 个 函数 , scope 表 示 调 用 函数 的 作用 域 .如 果 你 仔细 阅读 代码 就 会 了 解 ， 
里 边 使 用 的 set Interval () 循环 检测 ia 对 应 的 HTML 元 素 ， 直 到 它 可 用 时 才 停 止 循环 执 
行 En 函数 。 
口 resolveTextNode() 这 个 函数 与 事件 没有 关系 ， 它 仅仅 是 用 来 判断 。 如 果 参 数 node 是 一 
个 文本 节点 ， 就 返回 它 的 上 层 节 点 ， 和 否则， 返回 node 本 身 。 这 个 函数 是 get'Target () 函 
数 中 使 用 的 工具 函数 。 
D getRelatedTarget () 函数 会 返回 事件 相关 的 HTML 元 素 ， 它 先 尝试 获得 ev.related- 
Target。 如 果 这 个 ev.relatedaTarget 属 性 不 存在 ， 就 通过 ev.type 判 断 事件 类 型 。 如 
果 ev.type == "mouseout"， 就 返回 ev .toElement; 如 果 ev .type == "mouseover",， 
就 返回 ev . fromElement。 
至 此 ， 我 们 介绍 了 Ext .1ib.Event 中 所 有 的 主要 函数 ， 可 以 看 到 它们 都 提供 了 一 些 通 用 的 
底层 调用 方法 ， 后 面 会 在 Ext .EventManager 或 Ext .Eventobject 中 使 用 这 些 函 数 。 


O 


口 


OD 


2.1.4 Ext.util.Observable 


Ext .util .Observable 在 EXT 的 事件 模型 体系 中 有 举足轻重 的 地 位 , 位 于 EXT 组 件 的 顶端 ， 
为 EXT 组 件 提供 处 理事 件 的 最 基本 功能 。 要 实现 一 个 可 以 处 理事 件 的 EXT 组 件 ， 最 直接 的 方法 就 
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是 继承 Ext .util .Observable。 

本 章 开 始 的 示例 已 经 展示 了 如 何 使 用 Ext .util.0bservable 实 现 自 定义 事件 ， 你 大 概 也 了 
解 了 addListener/on、removeListener/un、addEvents、fireEvent 这 些 函 数 的 基本 用 法 。 
这 些 函 数 的 常用 功能 就 不 再 著述 ， 下 面 主要 讨论 一 下 与 事件 有 关 的 高 级 功能 。 

首先 ， 当 adqdListener/on 用 于 注册 事件 时 ， 可 以 使 用 复合 式 参 数 ， 如 下 面 的 代码 所 示 。 


PE OBt tt sse) aontoelicoky ni ThLiss 4 
single: true, 
delay: 100, 
testId: 4 





}}s 


上 述 代码 中 , 在 调用 on ( ) 为 ia=test 这 个 按钮 注册 click 事 件 时 使 用 了 4 个 参数 。click 是 事 
件 名 称 ，fn 是 在 click 事 件 被 触发 时 执行 的 函数 ;this 表示 fn 执行 时 的 作用 域 是 chis， 第 四 个 
参数 就 是 我 们 所 说 的 复合 式 参数 了 。 

如 果 你 已 经 运行 过 01-04a.html 这 个 示例 ， 就 应 该 知道 复合 式 参数 产生 了 什么 样 的 效果 。 示 例 
的 运行 结果 是 ， 在 第 一 次 单 击 “test” 按 钮 时 ，alert 提 示 杠 不 是 立刻 弹出 ， 而 是 延迟 一 段 时 间 才 弹 

” 出 。 在 第 二 次 单 击 “test” 按 钮 时 ， 就 什么 也 不 会 发 生 了 。 

这 些 效 果 就 是 复合 式 参 数 的 作用 ，single:true 表 示 这 个 注册 的 事件 处 理 函 数 仅 执行 一 次 ; 
delay:100 表 示 函 数 会 在 事件 发 生 后 延迟 100 ms 才 执 行 。 

Ext .util .Observable 支 持 的 特殊 参数 还 有 一 个 buffer， 如 下 面 代码 所 示 。 


Ext get{'test} on(t'elieck', fnr thiss. 4 
buffer: 1000, 
testId: 4 

} 


乍 一 看 ，buffer 和 aqaelay 的 作用 是 相同 的 ， 都 是 延迟 一 段 时 间 后 执行 对 应 的 监听 函数 , 但 是 
buffer 会 创建 一 个 Ext .util.DelayTask 对 象 ， 并 把 fn 放 入 其 中 等 待 执行 。 在 等 待 的 过 程 中 ， 
如 果 我 们 再 次 触发 了 事件 ， 那 么 上 次 的 任务 就 会 被 取消 ， 并 把 新 的 fn 放 入 任务 队列 里 ， 这 样 就 可 
以 保证 fn 不 会 重复 执行 多 次 。 

再 来 看 看 函数 fn 的 内 容 ， 如 下 面 的 代码 所 示 。 


var fn = functionl(le, el, args) I 
alert ("handlel"); 
alert (args.test1d); 
}:; 
这 里 演示 了 如 何 从 事件 监听 函数 中 获得 当初 在 复合 式 参数 中 定义 的 数据 ,我 们 在 复合 式 参 数 
中 定义 了 一 个 testId:4, 它 会 被 En 函数 的 第 三 个 参数 传递 到 函数 中 , 可 以 直接 通过 args .testId 
获得 这 个 参数 的 值 。 
我 们 还 可 以 在 复合 式 参 数 中 使 用 scope 指 定 事件 监听 函数 调用 的 作用 域 。 不 过 因为 在 on () 
函数 中 已 经 有 了 scope 参 数 ， 所 以 这 个 复合 式 参数 的 作用 也 就 不 那么 重要 了 。 
除了 复合 式 参 数 ， 还 可 以 使 用 on () 一 次 定义 多 个 事件 监听 器 ， 如 下 面 代码 所 示 。 
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Ext .get('test').on(t{ 
‘click'; { 
fn: fn 
}， 
'mouseover';: 1 
Fn Et 
single: true, 
delay: 100 
} 
3 


不 仅 如 此 ， 还 可 以 使 用 复合 式 参数 为 监听 函数 设置 更 多 功能 。 如 上 例 中 的 single:true 和 
delay :100， 使 得 只 有 了 鼎 标 第 一 次 移动 到 “test” 按 钮 上 时 才 会 触发 fn 函数 ， 并 且 在 事件 发 生 100 
ms 后 才能 执行 En 函数 。 

而 对 于 之 前 提 及 的 复合 式 参数 中 的 scope， 在 这 种 情况 下 就 必 不 可 少 了 。 因 为 已 经 不 再 用 原 
来 的 方式 定义 函数 执行 的 scope 作 用 域 ， 所 以 只 有 使 用 复合 式 参数 中 的 scope 才 能 保证 监听 函数 
在 正确 的 作用 域 上 执行 。 

Ext .util.Observable 还 有 一 个 重要 的 功能 ， 就 是 可 以 为 某 个 事件 设置 拦截 器 ， 统 一 管理 
方法 的 触发 。 我 们 使 用 capture () 和 releasecapture() 来 实现 这 个 功能 。 

我 们 在 Person 的 示例 中 使 用 capture() 函数 拦截 事件 的 触发 ， 如 下 面 的 代码 所 示 。 


Ext .get ('capturel').on{'click', function() { 
Ext .util.Observable.capture(person, function{) { 
alert('capturel'); 
return true; 
} 
3).3 
单 击 “capturel ”按钮 和 时， 拦截 person 的 fireEvent () 函数 。 在 触发 任意 一 个 事件 时 ， 弹 出 
alert 提 示 框 ， 并 返回 true。 这 样 不 会 中 止 事件 的 发 生 ， 设置 的 监听 函数 还 可 以 正常 捕获 到 事件 ， 


并 执行 相应 的 处 理 操作 ， 如 下 面 的 代码 所 示 。 


Ext .get{('capture2').on{'click', function{) { 
Ext .utili.Observable.capture{(person, function() { 
alert('capture2'); 
return false; 
四 
Ps 


单 击 “capture2 ”按钮 时 ， 弹 出 alert 提 示 框 后 返回 false， 这 会 中 止 事 件 的 发 生 ， 导 致 
fireEvent () 失效 。 监 听 函 数 无 法 捕获 到 事件 ， 当 然 也 就 无 法 执行 处 理 操 作 。 这 样 就 给 我 们 一 个 
选择 的 机 会 ， 通 过 控制 capture() 中 处 理 函 数 的 返回 值 来 决定 是 继续 执行 某 个 事件 的 监听 函数 ， 
还 是 直接 中 止 该 事件 的 发 生 。 

我 们 可 以 为 一 个 对 象 设置 多 个 capture () 拦截 函数 ， 这 些 拦截 函数 会 形成 一 个 处 理 链条 ， 只 
要 其 中 任何 一 个 拦截 函数 返回 false， 就 会 中 止 处 理 过 程 。 

releaseCapture() 函数 是 capture() 函数 的 反 向 操作 ， 它 会 一 次 性 清除 fi regvent () 上 所 
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有 的 拦截 函数 , 不 过 我 们 无 法 通过 它 准 确 删除 某 一 个 拦截 函数 。 一旦 执行 了 releaseCapture()， 
那么 之 前 设置 的 所 有 拦截 函数 就 都 失效 了 。 

如 果 只 想 通 过 一 次 设置 来 暂停 某 个 对 象 中 所 有 事件 的 发 生 , 可 以 考虑 使 用 suspendEvents() 
函数 ， 如 下 面 的 代码 所 示 。 


Ext .get ('suspendEvents') .on{'click', function() { 
person.suspendEvents{); 
3 


调用 suspendEvents () 后, person 中 所 有 的 事件 都 会 失效 , 只 有 再 次 调用 resumeEvents () 
才能 取消 这 个 效果 ， 如 下 面 的 代码 所 示 。 


Ext .get ('resumeEvents') .on({'click', function(} { 
Derson.resumeEvents(); 
Sj 
暂停 (suspendEvents) 与 继续 (resumeEvents) 这 两 个 事件 函数 可 以 帮助 我 们 统一 管理 
某 一 对 象 的 事件 。 





2.1.5 Ext .EventManageL 


作为 事件 管理 器 ，Ext .EventManager 定 义 了 一 系列 事件 相关 的 处 理 函 数 ， 其 中 最 常用 的 当 
属 onDocumentReady、onWindowResize 和 onTextResize。 其 中 onDocumentReady 就 是 我 们 经 
常见 到 的 Ext .onReady ()， 它 会 在 页 面 文档 演 染 完毕 但 图 片 等 还 未 下 载 时 调用 启动 函数 。 

让 我 们 来 看 一 下 Ext .onReady () 的 应 用 ， 如 代码 清单 2-4 所 示 。 


代码 清单 2-4 ”使 用 Ext .onReady 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>grid</title> 
<link rel="stylesheet" type="text/css" href="../../resources/css/ext~all.css" /> 
<Sscript type="text/javascript" src=",./../adapter/ext/ext-base.js"></script> 
<SCript type="text/javascript" src=".,./../ext-all.js"></script> 
<SCript type="text/javascript'"> 
Ext .onReady (function(){ 
Ext .Msg .alert (' 信 息 '，Ext.get{'test')); 
}): 
</script> 
</head> 
<body> 
<button id="test">test</button> 
</body> 
</html> 


打开 01-05a.html 后 ， 可 以 在 页 面 上 看 到 图 2-1 的 效果 ， 
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eat | 


图 2-1 使 用 Ext .onReady 


Ext .get('test') 正 确 获得 了 “test” 按 钮 对 应 的 Element 对 象 ， 并 显示 出 来 了 。 从 代码 中 
可 以 看 到 ， 我 们 编写 的 脚本 位 于 <head> 标 签 中 ， 而 “test” 按 钮 写 在 下 部 的 <bodqy> 标 签 里 。 按 照 
正常 的 加 载 执行 顺序 ， 脚 本 在 <body> 标 签 加 载 之 前 就 执行 了 ， 这 样 Ext .get ('test ' ) 就 会 找 不 
到 “test” 按 钮 ， 也 就 无 法 显示 正常 的 信息 。 但 是 ， 在 示例 中 我 们 得 到 了 正常 的 结果 ， 说 明 
Ext .onReady () 可 以 保证 它 里 面 的 内 容 会 在 所 有 的 HTML 元 素 都 加 载 完 成 后 才 执 行 。 这 样 就 避免 
了 许多 加 载 顺序 导致 的 问题 ， 我 们 也 不 用 再 为 脚本 需要 放 在 对 应 的 HTML 元 素 之 后 而 费 神 了 。 

虽然 我 们 说 没有 使 用 Ext .onReady () 可 能 会 导致 种 种 问题 ， 但 还 是 耳 听 为 虚 。 现 在 让 我 们 
看 一 下 ， 假 如 没有 Ext .onReady () 的 帮助 会 出 现 什 么 问题 ， 如 图 2-2 所 示 。 





图 2-2 不 使 用 Ext .onReady 

页 面 没 有 显示 任何 效果 , 而 且 出 现 了 一 个 错误 提示 。 这 是 因为 脚本 执行 时 页 面 标签 还 没有 加 
载 完全 ，EXT 无 法 获得 对 应 的 HTML 元 素 对 自身 进行 泻 染 ， 需 要 的 元 素 为 nu11， 结 果 就 会 报告 这 
个 错误 。 

所 以 , 无 论 什么 时 候 ， 都 要 使 用 Ext .onReady () 来 确保 脚本 是 在 HTML 元素 都 加 载 完 成 后 才 
执行 ， 这 样 可 以 避免 很 多 潜在 的 问题 。 

onwindowResize() 的 作用 是 监听 浏览 器 窗口 的 大 小 改变 , 它 会 提醒 我 们 浏览 器 窗口 的 大 小 
在 何 时 发 生 了 改变 ， 以 及 改变 后 的 大 小 ， 如 下 面 的 代码 所 示 。 


Ext .EventManager .OnWindaowResize(Efunctiontwiath，height) { 
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alert('width:' + width + ', height:' + height); 
] 


不 必 将 它 放 在 Ext .onReady () 中 ， 因 为 它 监听 的 是 window 对 象 ， 这 个 对 象 在 页 面 一 打开 时 
就 存在 了 。onwindowResize() 的 监听 函数 只 有 两 个 参数 width 和 height， 分 别 代 表 当 前 窗口 的 
宽 和 高 。 

onTextResize()} 是 一 个 有 用 的 工具 函数 ， 它 可 以 监听 用 户 修改 浏览 器 的 文字 大 小 ， 如 下 面 
的 代码 所 示 。 


Ext .OnReady (function() { 
Ext .EventManager .onTextResize(function(oldSize, newSize) { 
alert('oldSize:' + oldSize + ', newSize:' + newSize); 





有 了 
}}3 


onTextResize() 会 在 <zbody> 标 签 中 添加 一 个 包含 测试 文字 的 div 标 签 ， 然 后 监听 测试 文字 
的 大 小 。 如 果 测 试 文字 的 大 小 发 生 了 改变 ， 就 执行 监听 函数 ， 并 发 送 给 监听 函数 两 个 参数 ， 第 一 
个 参数 olasize 是 改变 前 文字 的 大 小 ， 第 二 个 参数 newsize 是 改变 后 文字 的 大 小 。 

需要 注意 的 是 , 因为 onTextResize() 需 要 操作 <body> 标 签 向 其 中 添加 测试 用 的 元 素 ， 所 以 
它 必 须 包 含 在 Ext .onReady (} 中 ， 否 则 会 出 现 错误 。 


2.1.6 Ext .EventObject 


Ext .EventObject 是 对 事件 的 封装 ， 它 将 EXT 自 定义 事件 和 浏览 器 事件 结合 在 一 起 使 用 。 
除 此 之 外 ， 它 还 提供 了 丰富 的 辅助 工具 函数 ， 帮 助 我 们 获得 事件 相关 的 信息 。 

Ext .EventObject 定 义 了 一 系列 的 功能 按键 ， 处 理 按键 事件 时 不 用 再 去 硬 背 ASCII 码 了 ， 这 
些 功能 按键 如 表 2-1 所 示 。 


表 2-1 Ext .Eventobject 中 按键 的 映射 关系 


Ext .Eventobject 中 的 名 称 ASCII 码 | Ext .Eventobject 中 的 名 称 ASCIH 码 
BACKSPACE 8 PAGEDOWN 34 
TAB 9 END 35 
RETURN 13 HOME 36 
ENTER 13 LEFT 37 
SHIFT 16 UP 38 
CONTROL 17 RIGHT 39 
ESC 27 DOWN 40 
SPACE 32 DELETE 46 
PAGEUP 33 F5 116 


下 面 利用 一 个 input type=text 的 输入 文本 框 来 演示 监听 用 户 按键 事件 ， 并 在 用 户 输入 空 
格 时 提示 ， 如 下 面 的 代码 所 示 。 


Ext .Get ('text') .on{'keypress', functionl(le) { 
If {(e.charCode == Ext .EventObject .SPACE) { 
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Ext .Msg.alert('info',，' 字 格 '); 

}) ; 

这 个 示例 在 用 户 按 下 空格 时 弹出 alert 提 示 框 。 注 意 监听 函数 的 参数 es， 其实 它 就 是 一 个 
Ext .Eventobject 的 实例 ， 它 的 charcode 代 表 了 刚才 按 下 按钮 的 ASCII 码 。 我 们 将 它 与 
Ext ,EventObject .SPACE 相 比较 ， 判 断 当前 按键 是 否 是 空格 。 

Ext .Eventobject 是 对 事件 的 封装 ， 如 果 我 们 想得到 原始 的 浏览 器 事件 ， 可 以 通过 
Ext .EventObject 的 browserEvent 来 获得 。 不 过 ， 这 可 是 未 经 任何 加 工 处 理 的 原生 事件 ， 在 不 
同 的 浏览 器 上 可 能 存在 着 很 大 的 差异 ， 所 以 还 是 建议 使 用 Ext .EventObject。 

通过 Ext .EventObject 的 文档 可 以 了 解 到 ， 它 包含 的 许多 工具 函数 都 与 Ext .1ib.Event 中 
的 函数 是 重 名 的 ， 如 get Pagex()、getPageY()、getPagexY()、getTarget () 和 getRelated- 
Target () 等 。 这 些 函 数 实 际 上 都 是 道 过 Ext .1ib.Event 实 现 的 ，Ext. EventObject 代 表 浏览 器 
事件 ， 在 内 部 使 用 Ext .1ib.Event 处 理 对 应 的 browserEvent。 

Ext .EventObject 对 Ext .1ib.Event 扩 展 的 部 分 是 对 鼠标 事件 和 按键 事件 的 增强 ， 它 可 以 
判断 ALT、CTRL、SHIFT 这 些 功 能 键 是 否 被 按 下 。 既 可 以 单独 使 用 altkey、ctrlKey 和 shiftKey 
判断 是 否 有 功能 键 被 按 下 , 也 可 以 使 用 hasModaifier() 判 断 是 否 有 功能 键 被 按 下 。 这 个 功能 一 般 
要 与 其 他 的 按键 状态 相配 合 ， 用 于 判断 组 合 按键 的 情况 。 

Ext .EventObject 提 供 的 男 一 个 有 趣 的 功能 函数 名 称 为 getwheelDelta {)， 可 以 获得 鼠标 
滚轮 的 aelta 值 。 在 下 面 的 示例 中 ， 我 们 监听 了 mousewheel1 事 件 ， 在 滚轮 转动 时 动态 修改 test 
这 个 Giv 的 宽度 ， 这 样 又 给 我 们 提供 了 一 种 提升 用 户 体验 的 方法 ， 如 下 面 的 代码 所 示 。 


Ext .get (document .body) .on('mousewheel', function(le)} { 
var delta = e.getWwheelDelta(); 
Var test = Ext .get{'test'); 
Var width = test.getWidtht{); 
test.setWidth(width + delta * 500, true); 


2.2 EXT 的 核心 组 件 


接 下 来 介绍 的 是 EXT 中 的 核心 组 件 ， 这 些 核心 组 件 作 为 EXT 整 体 架构 的 基石 ， 提 供 了 基本 的 
生命 周期 、 布 局 方式 管理 。 
2.2.1 Ext .Component 

Ext .Component 是 EXT 中 所 有 组 件 的 基 类 , 它 的 所 有 子 类 都 自动 享有 了 标准 EXT 组 件 的 生命 
周期 ， 包 括 创建 、 这 染 和 销毁 。 它 们 也 自动 支持 了 标准 的 隐藏 /显示 以 及 启用 /禁用 等 操作 。 

图 2-3 是 一 棵 单 根 的 组 件 继承 树 ， 从 Ext .component 开 始 依次 延展 开 来 ， 每 个 组 件 都 对 应 一 
个 xtype 属 性 ， 在 EXT 中 可 以 通过 xtype 属 性 直接 指定 在 某 处 使 用 的 组 件 。 

所 有 组 件 都 允许 在 Ext .container 及 其 子 类 中 进行 延迟 泻 染 (lazy render), 也 可 以 把 组 件 注 
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册 到 Ext .ComponentMgr 中 ， 这 样 就 可 以 在 任何 地 方 使 用 Ext .getcmp () 函数 直接 根据 id 获得 对 


应 的 组 件 。 
所 有 可 视 化 的 组 件 都 是 Ext .Component 的 子 类 ， 这 样 我 们 就 能 把 它们 放 到 layout 中 进行 布 


局 管理 。 
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图 2-3 组 件 继承 树 
组 件 大 致 可 以 分 成 3 类 : 基本 组 件 ( 见 表 2-2)、 工具 条 组 件 ( 见 表 2-3) 和 表单 组 件 ( 见 表 2-4)。 
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表 2-2 ”基本 组 件 
xtype 组 件 名 称 描 述 
box Ext.BoxComponent 具有 边框 属性 的 组 件 
button Ext.Button 按钮 
colorpalette Ext.ColorPalette 调 色 板 
component Ext.Component 组 件 
container Ext.Container 容器 
cycle Ext.CycleButton 循环 按钮 
dataview Ext.DataView 数据 显示 视图 
datepicker Ext.DatePicker 日 期 选择 面板 
editor Ext.Editor 编辑 器 
editorgrid Ext.grid.EditorGridPanel 可 编辑 的 表格 
grid Ext.grid.GridPanej 表格 
paging Ext.PagingToolbar 分 页 工具 条 
panel Ext.Panel 面板 (可 进行 子 布 局 ) 
Progress Ext.ProgressBar 进度 条 
splitbutton Ext.SplitButton 可 下 拉 的 按钮 
tabpanel Ext.TabPanel 选项 面板 
trecpanel Ext.tree.TreePancl 树 
viewport Ext.ViewPort 视图 
window Ext.Window 窗口 
表 2-3 工具 条 组 件 
xtype 组 件 名 称 描 述 
toolbar Ext.Toolbar 工具 条 
tbfill Ext.Toolbar.Fill 右 对 齐 填 充 '->' 
tbitem Ext.Toolbar.Item 工具 条 项 目 
tbseparator Ext.Toolbar.Separator 工具 条 分 隔 符 '-' 
tbspacer Ext.Toolbar.Spacer 工具 条 空白 
tbtext Ext.Toolbar. TextItem 工具 条 文本 项 
表 2-4 ”表单 组 件 
xtype 组 件 名 称 描 述 
form Ext.FormPanel 表单 面板 
checkbox Ext.form.Checkbox 多 选 框 
combo Ext.form.ComboBox 下 拉 列 表 
datcfield Ext.form.DateField 日 期 选择 项 
field Ext.form.Field 输入 框 
fieldset Ext.form.FieldSet 组 
hidden Ext,form.Hidden 表单 隐藏 域 
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( 续 ) 
xtype 组 件 名 称 描 述 

htmleditor Ext.form.HtmlEditor HTML 编 辑 器 
numberfield Ext.form.NumberField 数字 编辑 器 

radio Ext.form.Radio 单 选 框 

textarea Ext.form.TextArea 区 域 文本 框 
textfield Ext.form.TextField 表单 文本 框 
timefield Ext.form.TimeField 时 间 录 入 项 

trigger Ext.form. TriggerField 触发 录入 项 


通常 会 在 进行 布局 时 借助 xtype 实 现 简化 配置 和 延迟 加 载 的 功能 ， 如 果 和 希望 了 解 如 何在 布局 
中 使 用 xtype， 可 以 阅读 第 8 章 的 相关 内 容 。 


2.2.2 Ext .BoxComponent 


Ext. BoxComponent 也 是 一 个 比较 重要 的 基础 类 , 它 直接 继承 自 Ext .Component， 并 实现 了 
定位 和 控制 自身 大 小 的 功能 。 

可 以 使 用 pagex、 PageY、X、 y 为 Ext .BoxCcomponent 指 定 具 体 的 坐标 ， 也 使 用 wiath 和 
height 为 Ext . BoxComponent 指定 长 度 和 宽度 ， 或 者 使 用 autoHeight 和 autowiath 让 
Ext .BoxComponent 根 据 本 身 的 内 容 自 动 调整 长 度 和 高 度 。 

下 面 演 示 如 何 使 用 Ext .BoxCcomponent 在 页 面 中 定义 位 置 和 大 小 ， 如 下 面 的 代码 所 示 。 


Var box = new Ext.BoxComponent ({ 
1 
style: 'background-color:red;position:absolute;', 红色 
pageX: 100, RE 
pageY: 50, 
width: 200, 
height: 150 
}); 
box.render(); 


图 2-4 演 示 了 上 述 代 码 的 显示 效果 。 
所 以 ， 如 果 需 要 制作 一 个 可 控制 大 小 和 位 置 的 组 件 ， 
可 以 直接 从 Ext .BoxComponent 继 承 。 图 2-4 Ext .BoxComponent 





2.2.3 Ext.Container 


EXt.. Container 继 承 自 Ext .BoxComponent, 它 提供 多 两 个 重要 的 参数 1ayout 和 Items 。 
layout 参 数 指定 当前 组 件 使 用 何 种 布局 ，items 参 数 中 包含 的 是 当前 组 件 中 的 所 有 子 组 件 。 

如 果 你 想 制作 一 个 可 以 对 自身 包含 的 子 组 件 进 行 布局 的 组 件 ， 那 么 就 需要 继承 
Ext .Container，Ext .Container 是 一 切 可 布局 组 件 的 超 类 ， 图 2-5 是 它 的 继承 树 形 图 。 

有 关 Ext .Container 的 更 多 细节 ， 请 参考 第 8 章 中 有 关 布 局 的 部 分 。 
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Ext.Container 


二 44 
Ext.TabpPpanel 


-Ext.Window 
二 Extform.FieidSaet 


二 三 xform.FOormP32mel 





站 Extgrid.GridPanel 加 Extgrid.EditorGrdParai gy Ext.grid.PropertyGrid 


- Exttree,.TreePanel 


图 2-5 Ext .Container 的 继承 树 形 图 


2.2.4 Ext.Panel 


Ext .Panel 是 EXT 中 经 常用 到 的 一 个 组 件 , 它 直接 继承 自 Ext .Container。 与 上 面 那 些 组 件 
不 同 的 是 ，Ext .Panel 无 需 继承 就 可 以 直接 使 用 。 我 们 可 以 使 用 Fitle 参 数 定义 它 显 示 的 标题 ， 
使 用 tbar 和 bbar 设 置 上 下 位 置 的 工具 条 ， 使 用 collapseFirst、 collapsed、collapsedCls 
和 collapsible 设 置 与 面板 折合 相关 的 配置 。 除 此 之 外 ， 还 可 以 使 用 floating 和 shadow 设 置 浮 
动 阴影 效果 ， 以 及 使 用 HTML 直接 设置 面板 内 容 。 

现在 我 们 来 设置 一 个 包含 浮动 阴影 的 、 可 拖 放 的 、 可 折 登 的 、 设 置 了 大 小 、 位 置 、 标 题 和 内 
容 的 Ext .Panel， 如 下 面 的 代码 所 示 。 


Var panel = new EXt.pPanell(! 
el: ‘'test', 
title: ' 测 试 标 题 '， 
floating:; true, 
shadow: true, 
draggable: true, 
collapsible: true, 


hetmls " 测试 内 容 3 

pageX: 100, Pe 
pageY: 50, 测试 内 容 
width: 200, 

height: 150 


站 
panel .render (); 


其 显示 效果 如 图 2-6 所 示 。 
可 见 ，Ext .Pane1 是 一 个 相当 完美 的 标准 组 件 。 图 2-6 Ext .Panel 


2.2.5 Ext .mabPanel1 
Ext .TabPanel 是 另 一 个 常用 组 件 ， 一 两 句 话 很 难说 清楚 ， 但 是 看 到 显示 效果 就 很 容易 理解 
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标题 1 护 其 2 


如 图 2-7 所 示 ， 显 示 的 内 容 随 着 你 点 击 的 标题 而 变化 。 实 际 上 , 它 户 SI 
是 多 个 不 同 内 容 的 容器 ， 任 意 组 件 直接 使 用 ada() 函数 便 可 添加 到 
Ext .TabPanel 中 。 如 果 不 特 别 指定 xtype， 就 会 默认 使 用 Ext .Panel 
为 这 些 内 容 生 成 子 面板 ， 如 代码 清单 2-5 所 示 。 


代码 清单 2:5” ”创建 Ext TabPanel 


Var tabs = new Ext .TabpPanel({ 
renderTo: document .body, 


height: 100 
| 
tabs.add!({ 
title: ' 标 题 1'， 
html: ' 内 容 1， 
jy 
tabs.adal(t{ 
1 
title: “标题 2' ， 
hcml: ' 内 容 2'， 


Closable: true 


I 


tabs.activate{0); 


首先 创建 一 个 Ext .TabPanel， 第 一 个 参数 指定 它 泻 染 的 元 素 ， 我 们 直接 把 它 放 到 HTML 页 


面 的 Body 部 分 。 


然后 使 用 ada 函 数 向 TabPanel 里 添加 两 个 标签 , 同时 添加 对 应 的 内 容 。 我 们 来 看 一 下 它 里 边 


的 参数 。 


图 2-7 Ext .TabPanel 


D 第 一 个 参数 是 这 个 标签 对 应 的 ia， 我 们 使 用 Ext.ia() 函 数 生 成 唯一 的 ida 值 。 


D 第 二 个 参数 是 标签 上 显示 的 标题 。 


Q 第 三 个 参数 是 单 击 标签 后 显示 的 内 容 。 实际 上 这 里 可 以 放置 任何 HTML, 你 可 以 把 所 有 想 


放 的 内 容 放 到 里 边 。 


口 最 后 的 参数 是 一 个 布尔 值 ，true 或 false， 这 个 参数 决定 了 生成 的 标签 是 否 可 以 手工 关 
闭 ， 默 认 是 false， 不 会 显示 关闭 按钮 。 当 手工 设置 为 Lrue 后 ， 标 签 上 显示 一 个 关闭 按 


钮 ， 单 击 关 闭 按钮 后 ， 标 签 和 对 应 的 内 容 被 关 掉 。 


添加 标签 后 , 调用 activate() 函 数 让 指定 的 标签 变 成 激活 状态 , 参数 是 一 个 从 0 开始 的 索引 
值 ，activate (0) 激 活 第 一 个 标签 。 
现在 ， 这 些 参数 统一 放 到 大 括号 里 ， 这 样 我 们 更 容易 理解 这 些 参数 的 含义 ， 比 如 renderTo 
是 演 染 的 元 素 ，height 是 生成 的 高 度 ，tit1le 是 对 应 标题 ，HTML 是 对 应 内 容 ， 用 closable 确 
定 这 些 标签 是 否 能 关闭 。tab.activate(0) 依然 是 激活 第 一 个 标签 。 


上 述 代 码 对 应 的 示例 在 02-05a.html 中 。 
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接 下 来 ， 我 们 可 以 向 添加 的 标签 里 多 放 一 些 内 容 ， 创 建 两 个 按钮 ， 一 个 按钮 新 建 包 含 表格 的 
标签 ， 另 一 个 按钮 新 建 包 含 Panel 的 标签 ， 如 图 2-8 所 示 。 

其 实 只 要 知道 一 点 就 可 以 ，EXT 3.0 的 布局 里 可 以 随意 控制 这 些 。 比 如 使 用 items: [gria] 
指定 在 标签 里 放生 成 好 的 表格 ， 但 记得 要 写 上 1layout :'fit'。 这 个 布局 形式 可 以 让 内 部 的 表格 
随 着 外 部 而 自然 展开 ， 否 则 得 到 的 只 是 一 个 高 度 为 零 的 表格 ， 什 么 也 看 不 到 。 

加 入 表格 的 代码 如 下 所 示 : 


var tab = tabs.addt{t 
title: ' 表 格 ' + ia， 
closable: true, 
layout: ‘fit', 
items: [griG] 

} 2 

tabs.activate (tab); 


上 面 的 代码 在 添加 标签 时 自动 生成 一 个 标题 (title) 属性 ， 设置 closable:true， 则 可 以 
手工 关闭 这 个 标签 。1ayout :'fit' 让 里 边 自动 填充 整个 空间 ， 最 后 items: [grid] 告 诉 我 们 这 
里 面 放 的 是 表格 ,当然 这 个 表格 是 我 们 之 前 做 好 的 。 最 后 调用 tabs .activate (tab) 激 活 刚 才 添 
加 的 标签 ， 这 样 就 可 以 看 到 结果 了 。 

该 示例 在 02-05b.html 中 。 

上 面 的 例子 中 我 们 都 是 通过 JavaScript 为 TabPanel 创 建 显示 内 容 , 如 果 我 们 需要 的 内 容 是 从 后 
台 得 到 的 HTML 该 怎么 做 呢 ? 如 果 这 个 HTML 里 有 自己 的 JavaScript 脚 本 ， 是 不 是 可 以 在 加 载 完成 
后 再 执行 这 些 脚 本 呢 ? 

实际 上 可 以 通过 设置 autoLoad 参 数 来 实现 这 个 功能 ， 这 些 标 签 默 认 是 延迟 加 载 (lazy load) 
的 ， 只 有 在 激活 时 才 使 用 Ajax 到 后 台 获 取 数 据 ， 如 图 2-9 所 示 。 








给 则 一 十 grkd 
直 贸 加 html 
颇 加 一 十 penel 7 i 
执行 html 蜂 的 著 志 | 
字 : 时 2 ? 才 格 ext-genl7 | Panelext-Qen35 和 
和 邮 汗 2 < 实 闪 Bxt-Qerd2 湛 入 水 ecMt-0en20 | 
序号 客 称 
和 全 从 从 从 和 从 全 会 全 07-05c2.html 合 全 全 他 悦 
TR OOOOODO 
全 全 全 DOD 全 全 全 全 
图 2-8 动态 Ext .TabPanel 图 2-9 ”通过 设置 autoLoad 来 从 后 台 获 取 数 据 


这 里 会 显示 乱码 是 因为 Ajax 中 应 该 使 用 UTF-8 编 码 ， 而 中 文 页 面 用 GBK 编 码 ， 所 以 就 会 有 问 
题 。 如 果 想 正常 显示 中 文 ， 需 要 把 那些 文件 改 成 UTF-8 编 码 ， 就 不 会 再 出 现 乱码 了 。 
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这 部 分 代码 很 简单 ， 把 HTML 去 掉 ， 换 成 autoLoad 即 可 ， 如 下 面 的 代码 所 示 。 
tabs.adad l(t 

title; ' 标 题 1'， 

autoLoad: {url: '02-05cl.html'} 
}}; 


不 过 ， 如 果 这 样 做 ， 在 02-05cl1.html 里 有 JavaScript 脚 本 时 ， 代 码 也 不 会 执行 。 如 果 想 执行 包 
含 在 HTML 里 的 脚本 ， 还 需要 加 一 个 scripts 属 性 ， 如 下 面 的 代码 所 示 。 
tabs.addl(t 
title: “标题 2'" ， 
autoLoad: {url: ‘02-05c2.htmil', scripts: true}, 
closable: true 





站 让 


现在 ，02-05c2.html 里 的 脚本 就 可 以 执行 了 。02-05c.html 里 有 两 个 按钮 ， 第 一 个 按钮 添加 没 
有 脚本 的 02-05c1.html， 第 二 个 按钮 添加 有 脚本 的 02-05c2.html。 

上 面 主要 讲解 了 EXT 中 的 基本 事件 模型 以 及 一 些 常用 组 件 的 功能 和 方法 。 在 下 面 几 章 中 , 我 
们 会 分 别 介绍 各 个 组 件 的 使 用 方法 和 EXT 为 我 们 提供 的 更 丰富 的 功能 。 


2.3 小结 


本 章 主要 介绍 了 EXT 的 事件 模型 和 核心 组 件 ， 并 通过 实例 详细 讲解 了 事件 模型 的 使 用 方法 。 
此 外 ， 还 展示 了 EXT 中 的 组 件 继承 图 ， 并 对 其 中 的 常用 组 件 进 行 了 详细 讲解 。 
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本 章 内 容 

D 表格 的 特性 简介 

日 制作 一 个 简单 的 表格 

口 表格 常用 功能 详解 

O 表格 泻 染 

0 给 表格 的 行 和 列 设置 颜色 

口 自动 显示 行 号 和 复 选 杠 

D 选择 模型 
表格 视图 
D 表格 分 页 
Q 后 台 排 序 
口 可 编辑 表格 控件 一 一 EditorGrid 
口 属性 表格 控件 一 一 PropertyGrid 
0 分 组 表格 控件 一 一 Group 

口 可 拖 放 的 表格 

D 表格 与 右键 菜单 


3.1 表格 的 特性 简介 


EXT 中 的 表格 功能 非常 强大 ， 包括 排 序 、 缓 存 、 拖 动 、 隐 藏 某 一 列 、 自 动 显示 行 号 、 列 汇总 、 
单元 格 编辑 等 实用 功能 。 

表格 由 类 Ext ,grid.GridPanel 定 义 ， 继 承 自 Ext .Panel， 其 xtype 为 grid。 在 EXT 中 ， 表 
格 控件 必须 包含 列 定义 信息 ， 并 指定 表格 的 数据 存储 器 。 表 格 的 列 信 息 由 类 Ext .gria.column- 
Model 定 义 ， 而 表格 的 数据 存储 器 由 Ext .data.Store 定 义 。 根 据 解析 的 数据 不 同 ， 数 据 存储 器 
可 分 为 JsonStore、SimpleStroe、GroupingStore 等 。 

接 下 来 要 讨论 表格 的 各 种 功能 ， 包 括 选择 一 条 记录 、 选 择 多 条 记录 、 突 出 显示 选中 的 行 、 调 
整 列 宽度 、 列 排序 、 显 示 行 号 、 支 持 复 选 框 、 设 置 查看 某 些 列 ， 以 及 支持 本 地 和 远程 分 页 。 还 有 
可 编辑 的 表格 、 添 加 新 行 、 删 除 一 或 多 行 、 数 据 校 验 、 拖 放 改变 表格 大 小 、 在 表格 里 拖 放 一 或 多 








Ext .grid.GridView 
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行 ， 甚 至 还 可 以 在 树 形 和 表格 之 间 进行 数据 拖 放 ， 这 些 功能 竟然 都 在 EXT 表 格 控件 里 实现 了 , 令 
人 惊叹 ! 


3.2 ”制作 一 个 简单 的 表格 


木管 学 习 何 种 技术 ， 只 了 解 概念 是 不 行 的 ， 一 定 要 实践 。 下 面 我 们 在 examples 中 的 示例 的 基 
础 上 自己 制作 一 个 表格 ， 从 中 可 以 知道 表格 需要 进行 哪些 配置 。 

首先 ， 表 格 是 二 维 的 。 与 在 数据 库 中 新 建 表 一 样 ， 我 们 要 先 设置 表 的 列 数 、 每 列 的 名 称 和 类 
型 ， 以 及 如 何 显示 。 表 格 的 结构 和 数据 库 表 的 结构 非常 类 似 。 

在 EXT 中 ， 列 的 定义 叫做 columnModael， 简 称 为 cm， 它 是 整个 表格 的 列 模 型 ， 应 该 首先 创建 。 

在 这 里 ， 我 们 创建 一 个 包含 3 列 的 表格 〈 如 下 面 的 代码 所 示 )， 第 1 列 是 编号 〈ida)， 第 2 列 是 
名 称 (name)， 第 3 列 是 描述 (descn)。 


Var cm = new Ext .grid.ColumnModel(l[ 
{header: ' 编 号 ' ,dataIndex: 'id'},. 
[header:' 名 称 ' ,dataIndex: 'name'}， 
{header: ' 描 述 ', dataIndex:'descn')】 

] ); 


var cm = new Ext.grid.ColumnModel(...) 负 责 创建 表格 的 列 信 息 。 表 格 包含 的 列 由 
columns 配 置 属性 来 描述 , 简称 cm。columns 是 一 个 数组 , 每 一 行 数据 元 素描 述 表 格 的 一 列 信 息 ， 
表格 的 列 信 息 包含 首部 显示 文本 ‘header )、 列 对 应 的 记录 和 集 字 段 (dataIndex)、 列 是 否 可 排 
序 (sortable)、 列 的 演 染 函数 (renderer)、 宽 度 (width)、 格 式 化 信息 (format ) 等 ,在 
上 面 的 示例 中 只 用 到 了 header 及 datalIndex。 

表格 的 结构 确定 后 ， 我 们 就 可 以 向 里 面 添 加 数据 了 。 当 然 ， 数 据 也 是 二 维 的 ， 为 简便 起 见 ， 
我 们 参照 examples 里 的 array-grid.js 中 的 方式 ， 把 数据 直接 写 到 JavaScript 里 ， 如 下 面 的 代码 所 示 。 


var data = [ 
['1','namel', 'descnl’ 
'2','name2','descn2' 





["'* 泌 

[' 3 'name3', 'descn3’ 
['4', 'name4', 'descn4' 
['S5', 'nameS5', ‘descn5' 


med Wo) ed ehhh 
二 六 


}3 


在 上 面 的 代码 中 ，var data=. . .用 来 定义 表格 中 要 显示 的 数据 ， 这 是 一 个 有 5 条 记录 的 二 维 
数组 ， 显 示 到 表格 里 就 应 该 是 $ 行 ， 每 行 3 列 ， 正 好 对 应 ia、name 和 adescn。 此 时 ， 我 们 应 该 可 以 
想像 出 表格 显示 的 结果 了 。 为 了 让 美好 的 愿望 变 成 现实 ， 我 们 还 需要 转化 原始 数据 ， 如 下 面 的 代 
码 所 示 。 


Var store = new Ext .data.Storelt 
proxy: new Ext.data.MemoryProxy (data), 
reader: new Ext.data.ArrayReader({}, [ 
{name: 'id'}, 
{name: 'name'}, 
(name: 'descn'} 
py) yy 
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store.load(); 


var store=.. .用 来 创建 一 个 数据 存储 对 象 ， 这 也 是 表格 必须 配置 的 属性 ， 数 据 存储 对 象 
store 负 责 把 各 种 各 样 的 原始 数据 (如 二 维 数组 .JSON 对 象 数 组 ,XML 文本 等 ) 转 换 成 dExt . data. 
Record 类 型 的 对 象 。 通 过 Ext .data. Store, 我 们 可 以 把 任何 格式 的 数据 转化 成 表格 可 以 使 用 的 
形式 ， 这 样 就 不 需要 为 每 种 数据 格式 写 一 个 对 应 的 实现 。 

store 对 应 两 个 部 分 : proxy 和 reader。proxy 是 指 获 取 数据 的 方式 ， reader 是 指 如 何 解析 
这 一 堆 数 据 。 这 里 我 们 用 的 是 Ext .data .MemoryProxy， 它 是 专门 用 来 解析 JavaScript 变 量 的 。 在 
定义 MemoryProxy 对 象 时 ， 只 需要 把 上 面 定 义 的 data 作 为 参数 传递 进去 即 可 。 

Ext .data.ArrayReader 专 门 用 来 解析 数组 ， 并 且 告 诉 我 们 它 会 按照 定义 的 规范 进行 解析 ， 
定义 3 个 名 称 : ia、name 和 descn。 再 看 前 面 cm 定义 的 地 方 ， 这 里 的 3 个 名 称 就 是 和 cm 里 的 
dataIndex 相 对 应 的 。 这 样 ，cm 就 知道 column 是 如 何 与 store 中 的 数据 相对 应 的 。 注 意 ， 要 执行 
一 次 store.1oad()， 来 初始 化 数据 。 

如 果 第 1 列 数据 不 是 id 而 是 name， 第 2 列 数据 不 是 name 而 是 ia， 那么 就 要 使 用 mapping 来 指 
定 ， 如 下 面 的 代码 所 示 。 


Var store = new Ext .data.Storel(tf{ 
proxy: new Ext .data.MemoryProxy (data), 
reader: new Ext.data.ArrayReader ({}, | 
{name: "id', mapping; 1)}, 
{name: ‘'name', mapping: 0), 
{name: 'descn', mapping: 2} 
13 
+ 


结果 如 图 3-1 所 示 。 
在 图 3-1 中 , ia 和 name 两 列 的 数据 显示 调 


| 名 称 编号 雹 述 
换 了 。 启 以， 无论 数 据 排列 顺序 如 何 ， 我 们 


name1 


都 可 以 使 用 mapping 来 控制 对 应 关系 。 唯一 | "re ee 
需要 注意 的 是 ， 索 引 是 从 0 开始 的 ， 所 以 对 应 。 | nanes oe 
第 1 列 要 写成 mapping :0， 依次 类 推 。 ep 4 descnd 
表格 的 列 模型 定义 好 了 ， 原 始 数据 和 数 。 | nomes 5 eo 
据 的 转换 也 已 经 完成 ， 剩 下 的 只 需要 把 它们 “一 一 一 一 一 一 一 一 ~ 
装配 在 一 起 ， 我 们 的 表格 就 创建 成 功 了 ， 如 图 3-1 使 用 mapping 指 定数 据 对 应 位 置 


下 面 的 代码 所 示 。 


var grid = new Ext.grid.GridPanel{t{ 
renderTo: 'grid', 
store: store, 
cm: cm 

}}s 


Ext .grid.Grid 的 renderTo 属 性 指示 EXT 将 表格 泻 染 到 什么 地 方 ， 所 以 ， 在 HTML 里 应 该 
有 一 个 <div id="grid"></div> 与 之 对 应 。 
把 所 有 代码 组 合 到 一 起 〈 见 代码 清单 3-1)， 看 看 效果 吧 。 
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代码 清单 3-1 创建 Ext .grid.Gridranel 的 完整 代码 


var cm = new Ext .grid.ColumnModel (I 
{header: ' 编 号 ' ,dataIndex: 'id'}， 
{header: ' 名 称 ' ,datalIndex: 'name']， 
{header:' 描 述 ' ,dataIndex: 'descn'} 


var data = [ 
['1','namel', 'descnl'], 
('2', 'name2', 'descn2'],， 
['3','name3','descn3'], 
['4','name4d', 'descn4'], 
['5', 'name5', 'descn5'] 


Var store = new Ext.dGata.Storel( 
Proxy: new Ext .data.MemoryProxy (data), 
reader: new Ext.data.ArrayReader({}, I 
{name: 'id'), 
{name: 'name'}, 
{name: 'descn') 
0) 
})3 
store.load!(); 


var grid = new Ext .grid.Gridpanel({ 
renderTo: ‘grid', 
store: store, 
cm: cm 

})3 


下 面 就 是 一 个 显示 数据 的 简单 的 表格 ， 如 图 3-2 所 示 。 
该 示例 在 03.grid/03-01.html 文 件 中 。 








泣 号 名 称 的 述 


1 Naime1 descnfl 
2 name2 descn2 
3 name3 descn3 
4 named descn4 
5 names descns 


图 3-2 一 个 简单 的 表格 


3.3 ”表格 常用 功能 详解 


本 节 介 绍 在 使 用 表格 过 程 中 经 常会 使 用 到 的 常用 功能 , 使 用 这 些 功 能 我 们 可 以 迅速 创建 出 一 
个 强大 而 又 漂亮 的 表格 。 
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3.3.1 部 分 属性 功能 


默认 情况 下 ， 表 格 可 以 拖 放 列 《〈 见 图 3-3)， 也 可 以 改变 列 的 宽度 。 如 果 要 禁用 这 两 个 功能 ， 
在 定义 表格 对 象 时 将 enablecolumnMove 和 enablecolumnResize 设 置 为 false 即 可 。 

默认 情况 下 ， 表 格 也 支持 按 住 Shift 和 Ctrl 键 选择 多 行 的 功能 〈 见 图 3-4)。 全 选 后 ， 只 需要 任 
意 单 击 其 中 的 一 行 ， 就 可 取消 全 选 ， 只 选中 刚才 单 击 的 那 一 行 。 


所 号 名 入 攀 述 ;名 入 博 带 编号 

1 name1 售 descn1 , name1 descnft 1 

2 name2 dt 动 病 号 ; name2 descn2 2 

3 name3 descn3 : name3 descn3 3 

4 name4 descn4 :name4 descn4 4 
图 3-3 在 表格 中 拖 放 列 图 3-4 ”一 次 选择 多 行 


如 果 想 让 表格 显示 图 3-5 所 示 的 斑马 线 效果 ， 可 以 加 上 stripeRows:true， 如 下 面 的 代码 所 


var grid = new Ext.grid.GridPanel l(t{ 
//enableColumnMove: false, 
//enableColumnResize: false, 
renderTo; 'grid', 
stripeRows: true, 
store: store, 
cm: cm 
RE 
该 示例 在 03.grid/03-01-03.html 中 。 
表格 还 支持 一 种 读 取 数据 时 的 遮 罩 和 提示 功能 ( 见 图 3-6)， 设 置 属性 1oaGMask: true， 在 


store.1oad() 完 成 之 前 会 一 直 显 示 “Loading...”。 








蝙 号 名 和 粹 雹 述 润 恕 名 秘 描述 

1 name1 descn1 

2 name2 descn2 Uy dbp, 3 

3 name3 descn3 ee 

4 named descn4 

5 names descn5 

图 3-5 ”斑马 线 效 果 图 3-6 表格 读 取 数据 时 的 提示 功能 
图 3-6 的 具体 实现 如 下 面 的 代码 所 示 。 


Var cm = new EXLt.gSria.ColumnModel([ 
{header: ' 编 号 ' ,dataIndex:'id'},，, 
{header:' 名 称 ', dataIndex: 'name'})，, 
{header : ' 描 述 ' ,GataIndex: 'descn')} 
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])3 


var data = [ 

[L'il namel descnt, 
2', 'name2','dGescn2' 
'3','name3','descn3' 
4', 'name4','descn4' 
5','name5', ‘descnD' 


YY Py 
CE rn 和 rp ml。 Sm 
- 人 


Var Score = new Ext.data.Storell 
proxy: new Ext ,Qata.ScriptTagPrOxy1({ 
Url:'http://www.familyl68.com/data.json'}), 
reader: new Ext .data.AMArrayReader({}, | 
{name; 'id'}, 
{name: ‘name'}, 
{name: 'descn'} 
] ) 


var grid = new Ext .grid.GridPanel(t{ 
renderTo: 'grid', 
width: 350, 
height: 150, 
loadMask: true, 
store: store, 
cm: cm 
} 
store.load{); 


在 03.grid/03-01-04.html 中 ， 为 了 演示 这 一 效果 ， 没 有 使 用 MemoryProxy， 因 为 用 本 地 数据 读 
取 太 快 ， 根 本 看 不 到 读 取 过 程 。 所 以 我 们 使 用 了 另 一 个 远程 读 取 数 据 的 对 象 ScriptTagProxy， 
并 将 URL 属 性 设置 为 http://www.family168.com/， 这 样 返 回 的 数据 肯定 是 不 符合 要 求 的 , 于 是 读 取 
提示 信息 将 会 始终 停留 在 页 面 上 ， 大 家 使 用 时 也 要 注意 这 个 问题 。 


3.3.2 自主 决定 每 列 的 宽度 


到 这 里 ， 估 计 大 家 都 会 想 ， 如 果 所 有 列 的 宽度 都 一 样 ， 那 将 会 多 么 不 方便 ， 因 为 当 列 不 够 宽 
时 ， 还 要 自己 动手 调整 列 的 宽度 。 其 实 ，cm 支 持 给 每 列 设 置 宽度， 如 果 不 设置 ， 它 会 取 一 个 默认 
值 ， 默 认 宽 度 是 100px。 

要 自 定 义 宽度 ， 只 需 设 置 该 列 的 width 属性 即 可 ， 如 下 面 的 代码 所 示 。 


var cm = new Ext .grid.CoLurnModel([ 
{fheader: ' 编 号 ',dataIndex: 'id' ,width:20)， 
{header:' 名 称 ' , dataIndex: 'name' ,width:80},，, 
fheader: + 描述 ' ,dataIndex: 'descn',width:200} 


原来 等 宽 的 表格 就 会 变 成 如 图 3-7 所 示 的 样子 。 
该 示例 在 03.grid/03-02-01.html 中 。 
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当然 ， 这 样 还 是 会 比较 麻烦 ， 需 要 自己 去 计算 每 列 的 宽度 。 如 果 想 让 每 列 自 动 填 满 表 格 ， 只 
需要 viewconfig 中 的 forceFit 即 可 。 顾 名 思 义 ， 它 是 给 Gridview 用 的 配置 ， 它 指示 视图 层 重 
新 计算 所 有 列 宽 后 填充 表格 ， 如 图 3-8 所 示 。 


| 9 省 粹 雹 示 | 各 名 往 攀 达 | 
11 nemet descni1 j 1 name1 descn1 | 
| 2 name2 descn2 | 2 neme2 descn2 
| 3 name3 descn3 | 3 neme3 descn3 
| 4 name4 descn4 [4 named descn4 
1 Ds memes osens | 


图 3-7” 自 定 义 每 列 的 宽度 图 3-8 ”forceFit 自动 延伸 


实现 代码 如 下 所 示 。 


var grid = new Ext.grid.GridPanel({ 
renderTo: 'grid', 
store: store, 
cm: cm, 
ViewConfig: ({ 
forceFit: true 
} 
}); 


使 用 了 forceFit 以 后 ， 表 格 会 根据 cm 里 设置 的 wiath 按 比例 分 配 ， 非 常 智能 。 当 改变 某 一 
列 的 宽度 时 ， 表 格 将 会 重新 计算 其 他 列 的 宽度 ， 既 不 会 超出 ， 也 不 会 出 现 过 多 空余 。 

大 家 可 能 会 发 现 ， 即 使 设置 了 forceFit， 表格 的 右边 仍然 会 留 出 一 小 段 空白 区 域 。 实 际 上 ， 
这 里 的 空白 区 域 是 为 纵向 滚动 条 保留 的 ， 右边 的 空白 区 域 正 好 比 纵向 滚动 条 宽 一 点 儿 ， 在 高 度 超 
出 屏幕 或 表格 高 度 时 可 以 保证 只 出 现 纵向 滚动 条 ， 而 不 会 出 现 横 向 滚动 条 。 

该 示例 在 03.grid/03-02-02.html 中 。 

除了 使 用 autoSizeColumns/forceFit 重 新 计算 全 部 宽度 以 外 ， 还 可 以 考虑 autoExpand- 
Column， 它 可 以 让 指定 列 的 宽度 自动 伸展 ， 从 而 填充 整个 表格 ， 如 下 面 的 代码 所 示 。 


Var cm = new Ext.grid.ColumnModel ([ 
{header : ' 编 号 ' , dataIndex: 'id' ,width:20}，, 
{header:' 名 称 ' ,dataIndex: 'name' ,width:80},， 
{id:'descn' ,header: ' 描 述 ' ,dacalIndaex: 'descn',width:200) 


Var grid = new Ext .grid.Gridlt{ 
renderTo: 'grid', 
store: store, 
cm: cm, 
autoExpandColumn: ‘'descn' 


autoExpandCcolumm 只 能 指定 一 列 的 ia。 注意 ， 必 须 是 ia， 原来 我 们 设置 的 cm 里 都 没有 ia， 
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现在 为 了 使 用 autoExpandcolumn， 要 给 cm 的 aescn 设 置 ia。 于 是 在 泻 染 时 aescn 就 可 以 自动 延 
伸 ， 直 至 充满 整个 表格 ， 如 图 3-9 所 示 。 


| 编号 “名称 换 述 

| 1 name1 descnti 
| 2 name2 descn2 
| name3 descn3 
i 4 name4 descn4 
|5 names descn5 





图 3-9_ autoExpanaqCcolumn 自 动 延 伸 
该 示例 在 03.grid/03-02-03.htmj 中 。 


3.3.3 ”让 表格 支持 按 列 排序 


在 EXT 中 可 以 很 方便 地 实现 排序 功能 ， 只 需要 在 定义 列 模型 时 增加 sortable 属 性 ， 如 下 面 
”的 代码 所 示 。 


Var cm = new Ext .grid.ColumnModell(![ 
{header: ' 编 号 ' ,dataIndex:'id',sortable:true}, 
{header : ' 名 称 ' ,dataIndex: name']， 
{header : ' 描 述 ' , dataIndex: 'descn'] 
] ) ; 
设置 sortable 属 性 为 true 就 表示 该 列 允 许 排 序 ， 改 动 后 的 效果 如 图 3-10 所 示 。 
示例 在 03.grid/03-03-01.html 中 。 
你 会 发 现 编号 的 标题 上 多 了 一 个 向 下 的 小 箭头 ， 表 格 里 的 数据 按照 编号 降序 排列 。 一切 如 此 


简单 ， 我 们 已 经 实现 了 按 列 排序 ， 如 图 3-11 所 示 。 





人 CR 
柱 号 ~ 名 榨 栅 述 
5 Names5 descn5 4 
4 named descnd4 3 
3 name3 descn3 2 
2 name2 descn2 E 
1 name1 escni1 
图 3-10” 按 列 排序 图 3-11 ” 列 功 能 菜单 


只 要 给 每 列 加 上 sortable 属 性 并 且 设 置 为 crue， 便 可 以 实现 排序 功能 。 同 样 ， 取 消 排序 功 
能 只 要 去 掉 sortable 属 性 ， 或 者 将 它 设置 为 false 即 可 ， 如 下 面 的 代码 所 示 。 


var cm = new Ext.grid.ColumnModelt{! 
{header : ' 编 号 ' ,dataIndex:'id':,sortable:true})，, 


{header: ' 名 称 ' ,dataindex: 'name',sortable:true}， 
{header: ' 描 述 ' ,dataIndex: 'descn' ,sortable:true} 
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3.3.4 解决 中 文 排序 


国际 上 都 使 用 ASCII 码 进行 排序 ， 而 我 们 却 按 拼音 顺序 排序 ，EXT 自 动 排 好 的 中 文 在 我 们 看 
起 来 却 是 一 团 糟 。 
例如 我 们 在 小 学 时 常 念 的 “ 啊 听 由 路 咯 嘻 哩 佛 ”， 如 下 面 的 代码 所 示 。 


Var data = [ 
['1',' 哮 ','descnl']， 
[ 27，: 咳 ' descen2 1]， 
['3',' 陛 ','descn3']， 
['4',' 噜 ','descn4']， 
[1'5',' 赂 ','descn5'] 
] 3 


为 了 可 以 立刻 看 到 排序 效果 ,我 们 通过 sort Info 属 性 来 为 Ext .data. Store 设 置 一 个 默认 的 
排序 方式 ， 如 下 面 的 代码 所 示 。 


Var Store = new Ext.data.Storel(t 
PrOXY : new Ext .data.MemoryProxy (data), 
reader: new Ext.data.ArrayReader{{}, |[ 
Ca 汪 
{name: ‘'name'}, 
{name: ‘'descn'} 
上 ly 
sortinfo: {field: "name", direction: *ASC")} 
|] 


注意 多 出 来 的 那 行 〈 倒 数 第 2 行 )， 它 对 应 的 是 一 个 Jsonobject， | 编号 “名 炊 。 
field 代 表 排 序 的 列 名 ，airection 代 表 排 序 方式 ，Asc 是 升序 ，DEsc 是 3 二 
降序 。 5 让 
结果 你 会 看 到 , 默认 的 排序 方式 会 把 数据 显示 变 成 图 3-12 这 样 ， 完 全 :1 9 
乱 套 了 。 EE 
为 了 让 表格 实现 中 文 排序 的 功能 ， 我 们 需要 重 写 Ext .data. store ~ 
的 applySort 函 数 ， 代 码 如 下 所 示 。 图 3-12 ”默认 排序 效果 


Ext .data.Sstrore.prototype.applySort = function() { 
if (this.sortInfo && !this.remoteSsort) { 
var s = this.sortIinfo, f = s.field; 
var st = this.fields.get {(f) .sortType; 
VAY :En = Functiontriy r2} 1{ 
var vl = st(rl.data[f]), v2 = st(r2.data[f]}; 
if (typeof {vil) == "String*) { 
return vl.localeCompare (v2); 
} 
eburn Ns Va TB MVE WE 
ks 
this.data,sort(s.direction, fn}); 
if (this.snapshotr && this.snapshot != this.data) 1{ 
this.snapshot .sort {s.direction, fn); 


} 
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以 上 这 段 代 码 重 写 了 Ext .data.Store 的 applySort 函 数 , 使 其 支持 中 | 编号 ”名称 < 


文 排序 。 你 可 以 把 这 段 代码 加 到 ext-alljs 文 件 的 最 后 ， 或 者 放 到 HTML 页 面 。 1 四 
的 最 上 面 ， 总 之 是 要 在 EXT 初 始 化 之 后 ， 实 际 代码 调用 之 前 执行 。 m 
现在 我 们 可 以 看 到 排序 结果 和 预想 的 是 一 样 的 了 ， 如 图 3-13 所 示 。 be 
完整 代码 如 下 所 示 : .5 
Ext .data.Store.prototype.applySort = functionf) { 
if {this.sortIinfo && !Lhis.remoteSort) f{ 图 3-13 ”中 文 排 序 





var S = this.sortIinfo, f = s.field; 
var st = this.fields.get(f) .sortType:; 
var fn = function{r1l, r2}) { 
Var Vi = et(lrl .datalf£f)): v2 = tlr2.datattfl); 
if (typeof (v1) == "string") 1 
return vl.iocaleCompare {v2); 
} 
Veturn Ml » V2 eT ss (le VIB = Djs 
}} 
this.data.sort(s.direction, fn); 
if (this.snapshot && this.snapshot != this.data) { 
this.snapshot.sort(s.direction, fn); 
} 


]s 
Ext .onReady (function(})t{ 


Var cm = new Ext ,Grid.ColumnModel([ 

{header: ' 编 号 ' ,dataIndex: 'id',sortable:true,width:35}, 

{header:' 名 称 ', dataIndex:'name' ,sortable:true,width:80}), 

{id:'descn' ,header:' 描 述 ' ,dataIndex:'descn'， sortable:true,width:200} 
] 


Var data = [ 
的 
['2',' 典 ','descn2']， 
[3 健 1 vQesen3 2]， 
['4',' 哗 ','descn4']， 
['5',' 咯 ','descn5'】 


Var Score = new Ext.data.Storel(t{ 
Proxy: new Ext .data.MemoryProxy (data), 
reader: new Ext.data.ArrayReader({}, I[ 
{name: ‘id’'}, 
{name: 'name'}, 
{name: 'descn‘']) 
]),， 
sortIinfo: {field: "name", direction: "ASC") 
前 大 
store.load(); 


var grid = new Ext .grid.GridPanel{t{ 
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autoHeight:; true, 

renderTo: 'grid', 

store: store, 

cm cm, 

autoExpandColumn: 'descn' 
Ji 


要 
该 示例 在 03.grid/03-04-01.html 中 。 


3.3.5 显示 日 期 类 型 数据 


尽管 返回 的 JSON 里 都 是 数字 和 字符 串 ， 但 在 EXT 里 我 们 同样 可 以 从 后 台 取 得 日 期 类 型 的 数 
据 ， 然 后 交 给 表格 进行 格式 化 。 下 面 我 们 来 看 看 如 何 实现 它 。 
首先 ， 定 义 一 组 数据 ， 其 中 最 后 一 列 是 日 期 格式 的 数据 ， 如 下 面 的 代码 所 示 。 


var data = [ 
('1', 'namel', ‘descnl', ‘1970-01-15T02:58:04'!], 
'2','name2','descn2',"'1970-01-15T02:58:04'],， 
[('3', 'name3','descn3','1970-01-15T02:58:;04'],， 
['4','name4','descn4','1970-01-1]15T02:58:04']， 
('5','name5', 'descn5','1970-01-15T02:58:04'] 


nn 


js 
接着 在 reader 里 增加 一 行 配置 ， 除 了 设置 name 以 外 ， 还 设置 了 type 和 dateFormat 两 个 属 
性 。 其 中 type 属 性 会 告诉 reader 在 解析 原始 数据 时 把 对 应 的 列 作为 日 期 类 型 处 理 , dateFormat 


属性 把 得 到 的 字符 串 转 换 成 相应 的 日 期 格式 。 按 照 EXT 的 约定 ，Y 是 年 ，m 是 月 ，a 是 日 期 ，H 是 小 
时 ，i 是 分 钟 ，s 是 秒 ， 如 下 面 的 代码 所 示 。 


var store = new Ext.data.Storelt 
proxy: new Ext.data.MemoryProxy {data)}, 
reader: new Ext.data.ArrayReader({}, [ 
{name: ‘'id'}, 
{name: ‘name')}, 
{name; 'descn'}, 
{name: '‘'date', type: 'date',dateFormat:'Y-m-ATH:i:s'} 
] ) 


同样 地 ， 我 们 还 需要 在 cm 里 增加 一 行 配置 ， 并 且 配 置 了 renderer 属 性 用 于 格式 化 日 期 格式 
的 数据 ， 代 码 如 下 所 示 。 


var Cm = new Ext .gria.ColumnModel([ 
[header:; ' 编 号 ' ,dataIndex:'id'}， 
[header:' 名 称 ' ,dataIndex: 'name'}，, 
{header: ' 描 述 ' , dataIndex: 'descn'}， 
{header:; ' 日 期 ' ,dataIndex: 'date',type:'date', renderer: Ext.util.Format. 
dateRenderer{'Y 年 m 月 4 日 ')} 
J] 


我 们 注意 到 ，renderer 属 性 对 应 的 值 是 Ext .util .Format .dateRenderer ('Y 年 m 月 dH ')， 
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这 就 是 EXT 提 供 的 日 期 格式 化 方法 。 这 样 我 们 就 不 需要 再 专门 编写 格式 化 日 期 的 函数 了 ， 直 接 使 
用 封装 好 的 工具 类 即 可 。 
该 示例 在 03.grid/03-05-01.html 中 。 


3.4 ”表格 泻 染 


如 果 表 格 中 只 能 显示 文字 ， 那 就 太 单调 了 。 但 想 让 单元 格 里 显示 不 同 颜色 的 内 容 ， 或 者 干脆 
显示 一 张 图 片 ， 应 该 怎么 做 呢 ? 

幸运 的 是 ，EXT 已 经 为 我 们 提供 了 这 样 的 功能 。 实 际 上 ， 在 上 一 个 示例 里 我 们 已 经 涉及 了 这 
样 的 应 用 。 不 同 的 是 ， 在 上 一 个 示例 里 我 们 处 理 的 是 一 个 与 日 期 有 关 的 示例 。 

现在 ， 我 们 扩充 数据 aata， 增 加 一 个 表示 性 别 的 字段 值 ， 如 下 面 的 代码 所 示 。 


var data = [ 
['1','male','namel','descnl'], 
','female', 'name2','descn2'], 
''male','name3','descn3'], 
''female', 'name4','descn4°'], 
,'male', 'nameS5', 'descnS5'] 





pe 一 一 一 
nV 


]; 
然后 修改 as， 新 增 一 行 配置 来 描述 性 别 字段 ， 如 下 面 的 代码 所 示 。 


Var store = new EXxt ,aata.Store (1{ 
proxy: new Ext .data.MemoryProxy (data), 
reader: new Ext .data.ArrayReader({}, I[ 
{name: 'id'}, 
{name: 'sex’'}), 
{name: ‘name'}, 
{name: 'descn'} 
] ) 
六 


从 上 面 的 代码 我 们 可 以 看 到 新 增 了 一 行 {name: 'sex'}， 即 将 数组 的 第 二 列 映 射 为 性 别 ， 
这 样 表格 就 能 知道 sex 这 一 列 的 存在 。 但 是 ， 现 在 仍然 无 法 显示 性 别 这 一 列 ， 因 为 还 要 修改 cm， 
如 下 面 的 代码 所 示 。 


var cm = new Ext .grid.ColumnModel([ 
{header:' 编 号 ' ,dataIndex: 'id')， 
{header: ' 性 别 ' ,dataIndex: 'sex'}， 
{header:' 名 称 ' , GataIndex:'name')，, 
{header:' 描 述 ' ,dataIndex: 'descn') 
阶 羽 ， 


到 目前 为 止 ， 我 们 其 实 只 是 新 增加 了 一 LS 放 唱 名 往 局 未 
列 ， 与 前 几 个 示例 并 没有 太 大 的 区 别 。 现 在 ， 机 Ce ec 
我 们 让 不 同性 别 显示 不 同 颜色 的 字 , 男士 使 用 ， 红 半 1 descn3 
红色 ， 女 士 使 用 绿色 ， 这 样 会 一 目 了 然 。 先 看 4 妇女 name4 descn4 
一 下 图 3-14 显 示 的 效果 。 ae ee 
如 果 大 家 熟悉 HTML 和 CSS， 相 信 都 知道 图 3-14 ”修改 文字 颜色 
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这 是 怎么 实现 的 。 如 果 对 HTML 和 CSS 不 熟悉 ， 建 议 先 了 解 一 下 相关 的 基础 知识 ， 因 为 EXT 与 
HTML 和 CSS 之 间 的 关系 非常 紧密 。JavaScript 更 需要 学 习 ， 因 为 EXT 就 是 轻 量 级 的 JavaScript。 


修改 单元 格 中 内 容 的 颜色 的 代码 如 下 所 示 。 


var cm = new Ext .grid.ColumnModel!([ 
{header: ' 编 号 ' ,dataIndex: 'id'},，, 


{header : ' 性 别 ', dataIndex: 'sex' ,renderer:function(value) { 


if (value == 


二 童工 


} 
}}, 


{header:' 名 称 ' ,dataIndex:'name'】， 
{header: ' 描 述 ' ,dataIndex: 'descn'】 


1])» 


‘male') { 


return "<span style='color:;red;font-weight:bold;'> 红 男 </span>"; 


se { 


return "<span style='color:green;font-weight:bold;'> 绿 女 </span>"; 


可 以 看 到 ， 我 们 在 cm 里 增加 了 renderer 属 性 ，renderer 的 值 是 一 个 自 定义 函数 。 不 过 ， 这 
样 会 让 代码 显得 很 乱 ， 所 以 建议 将 代码 做 如 下 修改 。 


function rendaGerSex(value) 


if (value == 


'male!') 


( 


{ 


return "<span style='color:red;font-weight:bold;'> 红 押 </span>"; 


} else f 


return "<span style='color:green;font-weight :bold;'> 绿 女 </span>"; 


) 
} 


Var cm = new Ext .grid.ColumnModelt{I 
{header:' 编 号 ' , dataIndex:'id'})， 


{header: ' 性 别 ' ,dataIndex: 'sex' :renderer:renderSex}, 


{header:' 名 称 ' ,dataIndex: 'name'})， 
{header : ' 描 述 ' , dataIndex: 'descn'} 


1 


大 家 应 该 看 到 了 ， 只 需要 在 返回 value 之 前 拼装 上 相应 的 HTML 和 CSSs 即 可 。 既 然 可 以 自 定 
义 HTML 和 CSS， 那 么 在 单元 格 里 增加 一 张 图 片 就 是 一 件 很 轻松 的 事 了 ， 如 图 3-15 所 示 。 





| 枝叶 


自 定义 函数 的 代码 如 下 所 示 。 


function renderSex(value) { 


if (value == 


return "<span style='color:red;font-weight 
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"male') 


{ 


长 划 

开 男 急 
妇女 县 
工 关 县 
绿 女 县 
红 男 县 


图 3-15 显示 图 片 


名 徐 
name1 


name2 
name3 
narme4 


Names 


:bold; '> 红 男 </span><img src='user_ 
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male.png' />"; 
} else 1 
return "<span style='color:green;font-weight :bold;'> 绿 女 </span><img 
Src='USer_ 
female.png' />"; 
} 


} 
如 果 你 对 HTML 和 CSS 非 常 精通 ， 那 么 一 定 能 轻松 实现 这 些 效果 。 下 面 我 们 来 尝试 一 个 更 复 
杂 的 示例 ， 代 码 如 下 所 示 。 


function renderDescn{value, cellmeta, record, rowlndex, columnIindex, store) 
var Str = "<input type='button' value=' 查 看 详细 信息 ' onclick='alert{\"" + 
"这 个 单元 格 的 值 是 : " + value + "\\n" + 
"这 个 单元 格 的 配置 是 : {cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" 
+ Cellmeta.css + "}\\n" + 
“这 个 单元 格 对 应 行 的 record 是 : " + recorda + "， 一 行 的 数据 都 在 里 边 \\rni" + 
"这 是 第 + rowIndex + " 行 \\n" + 
"这 是 第 " + columnIndex + " 列 \\nm" + 
"这 个 表格 对 应 的 Ext .data .Store 在 这 里 : " + store + "， 随便 用 有 吧 。" + 
SR 
return str; 
| 


我 们 可 以 在 renderer 里 得 到 多 个 参数 ， 如 下 所 示 。 

O value: 将 要 显示 到 单元 格 里 的 值 。 

口 cellmeta: 单元 格 的 相关 属性 ， 主 要 有 id 和 CSS。 

D record: 这 行 的 数据 对 象 ， 如 果 需 要 获取 其 他 列 的 值 ， 可 以 通过 record.dataf"ida"] 的 

方式 得 到 。 

DO rowIndex: 行 号 ， 这 里 的 行 号 指 的 是 当前 页 中 所 有 记录 的 顺序 。 

口 columnIndex: 当前 列 的 列 号 。 

口 store: 构造 表格 时 传递 的 dss。 也 就 是 说 ， 表 格 里 的 所 有 数据 都 可 以 通过 store 获 得。 

大 家 肯定 有 疑问 , 我 们 只 是 将 一 个 自 定义 函数 设置 到 renderer 上 , 这 些 参 数 是 从 哪里 来 的 呢 ? 

其 实 这 个 问题 比较 简单 ， 既 然 是 函数 ， 就 肯定 有 调用 它 的 地 方 ， 我 们 只 要 打开 EXT 源 码 
GridViewjs 找 到 调用 renderer 的 地 方 ,就 可 以 看 到 这 些 参 数 是 如 何 传 递 到 我 们 的 自 定义 函数 中 的 。 

看 看 效果 ， 如 图 3-16 所 示 。 


ep 四 | 本 ba 
1 和 男 刍 namel 豆 看 详细 馆 息 








这 是 第 3 草 
这 个 圳 格 对 应 的 Ext,data.Store 在 这 里 : [object Object] , 陛 便 用 吧 。 
;各 定 





图 3-16 复杂 泻 染 效果 
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完整 代码 如 下 所 示 : 


function renderSex (value) f 
if {value == 'male') { 
return "<span style='color:red;font-weight:bold;'> 红 男 </span><img src='user 
male.png' />"; 
} else { , 
return "<Span style='color:green;font-weight:bold;'> 绿 女 </span><img src= 
'USer_female.png’' />"; 


} 


function renderDescn{(lvalue, cellmeta, record, rowIndex, columnIndex, store) { 
var str = "<input type='button' value=' 查 看 详细 信息 ' onclick='alert({\"" + 
"这 个 单元 格 的 值 是 : " + value + "\\n" + 
"这 个 单元 格 的 配置 是 : {cellId:" + cellmeta.cellId + ",id:" + cellmeta.id 
iCal" + Cellmeta.css + "}\Nn" $+ 
"这 个 单元 格 对 应 行 的 record 是 : " + recora + "， 一 行 的 数据 都 在 里 边 \\n" + 
"这 是 第 ” + rowIndex + " 行 \\n" + 
"这 是 第 * + columnIndex + " 列 \\n" + 
"这 个 表格 对 应 的 Ext ,data.Store 在 这 里 ; ”+ store + “"， 随 便 用 吧 。* + 
| | 


return- strs 


Var cm = new Ext .gria.CoeolurnModel([ 
{header:' 编 号 ' ,dataIndex: 'id')， 
{header: ' 性 别 ' ,dataIndex:'sex'’ ,renderer:renderSex)}, 
{header:' 名 称 ', dataIndex: 'name'】，, 
{header:' 描 述 ' ,dataIndex: 'descn',renderer:renderDescn] 
]); 


Var data = | 
['1', 'male', ‘namel', 'descnl’), 
[i'2','female', 'name2', 'descn2'], 
[('3','male', ‘name3','descn3'], 
['4',’'female', 'name4','descn4'], 
['S5', 'male', 'name5', 'descn5'] 


Var store = new Ext .data.Storelt{ 
proxy: new Ext .data.MemoryProxy {data), 
reader: new Ext.data.ArrayReader({}, I 
[name: 'id'}), 
{name: 'sex'}, 
{name: ‘name'}, 
{name: 'descn')} 
] ) 
}}; 
store.load!(); 


var grid = new Ext .grid.GridPanel (1 


autoHeight: true, 
renderTo;: ‘grid', 
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Store: Score， 
cm: cm 
二 


该 示例 在 03.grid 目 录 下 的 04-01.htmil 中 。 


3.5 ”给 表格 的 行 和 列 设置 颜色 


即便 是 带 有 斑马 条 的 表格 也 难以 满足 追求 更 炫丽 的 页 面 的 客户 的 需求 。 所 以 , 我 们 可 以 设置 
表格 的 行 或 列 的 颜色 ， 从 而 产生 更 好 的 视觉 效果 ， 给 行 设置 颜色 的 代码 如 下 所 示 。 


viewConfig : { 
forceFit : true, 
enableRowBody : true, 
getRowClass :function(record, rowIndex, p, ds})! 
Var cls = 'white-row'; 
Switch (record.data.color)t{ 
case '#FBF8BF' 
cls = 'yellow-row' 
break; 
Case ‘'#99CC99'! 
cls = 'green-row'’ 
break; 
Case '#FS5COCO! 
cls = 'red-row'’ 
break; 





} 
return cls; 
} 
} 


CSS 中 相应 的 代码 如 下 所 示 。 


#uses the following css: 
.red-row{ background-color: #F5COCO !important; } 
‘Yellow-row{ background-color: #FBF8BF !important; } 
.Green-Iow{ background-color: #99CC99 !important; } 


运行 结果 如 图 3-17 所 示 。 


name SEX 
boy 0 

> i ' ee 
Wh OU 
man 0 

worfran 1 


图 3-17 自 定 义 行 的 颜色 
下 面 的 代码 用 来 动态 修改 列 的 背景 色 : 


function renderMotif (data, cell, record, rowIndex, columnIndex, store)t{ 
Var Value = record.get('color') 
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cell.attr = "style=bhbackground-color:" + value; 
return data; 


} 


Var cm = new Ext .grid.ColumnModel{lI[ 

{header; ‘name', dataIndex: ‘'name'}, 

{header: ‘'sex', dataInex: 'sex'}, 

{header: ‘color', dataIndex: '‘'color', renderer: renderMotif} 
] ) 7 





运行 结果 如 图 3-18 所 示 。 
name SOx color 
| boy 0 #FBF8BF 
' girl 1 #FBFSOF 
man 0 #FBF8BF 
woman 1 六 BF8BF 


图 3-18 ” 自 定 义 列 的 颜色 
当然 ， 如 果 只 修改 表格 的 某 一 行 的 样式 ， 还 可 以 用 下 面 的 方式 实现 。 


grid.getView() .addRowClass (r,css) 


修改 表格 某 一 单元 格 的 样式 可 以 用 下 面 的 方式 实现 。 


Ext .get(grlia.getView().getCcelltr,c)).addclass(css) 


grid.getView() .getRow{r) .style.backgroundColor="red"; 
3.6 自动 显示 行 号 和 复 选 杠 


实际 上 ， 行 号 和 复 选 框 都 是 renderer 的 延伸 。 当 然 ， 复 选 框 的 功能 要 复杂 得 多 ， 两 者 经 常 
一 起 使 用 ， 所 以 我 们 放 在 一 起 讲述 。 


3.6.1 自动 显示 行 号 
修改 前 面 示 例 中 的 列 模型 cn， 加 入 RowNumberer 对 象 ， 如 下 面 的 代码 所 示 。 


Var cm = new Ext .grid.ColumnModel (i 
new Ext .grid.RowNumberer{)}, 
{header:' 编 号 ' ,dataIndex:'id'}, 
{header: ' 性 别 ' ,GataIndex: 'sex'}, 
{header:;' 名 称 ' ,dataIndex: 'name'}， 
{header:' 描 述 ' ,dataIndex: 'descn'} 

J 


从 图 3-19 中 可 以 看 到 ， 表 格 最 左边 自动 显示 了 行 号 。 

该 示例 在 03.grid/06-01-01.html 中 。 

关于 自动 计算 行 号 ， 它 总 伴随 着 一 个 小 小 的 问题 。 如 果 删 除 表格 中 间 的 一 行 ， 那 么 行 号 就 不 
连续 了 ， 所 以 需要 刷新 表格 的 视图 ， 让 表格 重新 计算 行 号 。 
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| 好 号 长 别 名 入 扬 隶 


估计 male name1 descn1 
2 沁 female name2 descn2 
“ :党 male name3 descn3 
4 4 tremale Name4 descn4 
5 male names descn5 





图 3-19 ”自动 显示 行 号 


我 们 在 HTML 里 添加 一 个 按钮 ， 将 它 的 a 设置 为 remove， 然 后 在 按 下 按钮 时 删除 表格 的 第 2 
行 数据 ， 代 码 如 下 所 示 。 
Ext ,get ('remove') .on('click’', function() { 


store.remove{store.getAt {1)); 
Ts 


我 们 会 在 浏览 器 中 发 现 页 面 里 多 了 一 个 按钮 ， 上 面 的 代码 中 使 用 Ext .get () 获得 这 个 按钮 ， 
并 监听 它 的 click 事 件 ， 执 行 ds .remove (ds .getat (1) )，ds .getat 方 法 用 于 获得 某 一 行 数 据 ， 
删除 后 的 效果 如 图 3-20 所 示 。 


录 号 攻 别 名 入 坊 丸 


和 村 male marme1 descni 
了 号 male name3 descn3 
| temale rames descn4 

5 mate Nnames descns 





图 3-20 ”删除 后 行 号 不 能 连续 
可 以 看 到 删除 第 2 行 数据 后 ， 行 号 变 得 不 连续 了 。 再 来 看 看 下 面 的 这 段 代 码 : 


Ext ,get ('remove') .on('click', function() ({ 
store.removelstore.getAt (1)); 
grid.view.refresh!(}; 

3 


增加 了 一 行 代码 , 用 于 在 执行 删除 操作 后 刷新 表格 视图 。 刷新 后 , 表格 就 会 调用 renderer () 
重新 计算 所 有 行 号 。 这 样 使 得 到 我 们 想 要 显示 的 效果 了 。 完 整 代码 如 下 所 示 : 


var cm = new Ext .grid.ColumnModel (i 
new Ext .grid.RowNumberer{(}, 
{header : ' 编 号 ' , dataIndex: 'id'}，, 
{header: ' 性 别 ' ,dataIndex: 'sex'}， 
{header:' 名 称 ' ,dataIndex: 'name' Pe 
{header:' 描 述 ' ,dataIndex:'descn')】 

后， 


var data = [ 
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', "male', 'namel', 'descnil'], 
",'female', ‘name2','descn2'1], 
', "male', 'name3','descn3'], 
','female', 'name4','descn4'], 
','male', 'nameS5', 'Gdescn5'] 


Var store = new Ext .data.Storel(lt 
proxy: new Ext.data.MemoryProxy (data), 
reader: new Ext .data,.ArrayReader{{}, [ 
{name: 'id'}), 
{name: 'sex'}), 
{name: 'name'}, 
{name: ‘descn'} 
]) 
天 
store.load!({); 


Var grid = new Ext .grid.GridPanel({ 
autoHeight: true, 
renderTo: 'grid', 
store: store, 
cm: cm 


Ext .get {'remove').on('click', function{}) { 
store.remove(store.getAt (1)); 
grid.view.refresht{); 


最 终 页 面 显 示 效 果 如 图 3-21 所 示 。 





蜗 号 性别 名 畦 二 述 
| male natmel descn1 
2 3 male name3 descn3 
3 4 female name4 eescn4 
4 5 male names gescn5 





图 3-21 刷新 自动 行 号 
该 示例 在 03.grid/06-01-02.html 中 。 


3.6.2 ” 复 选 杠 


为 了 在 表格 中 添加 复 选 功能 ， 我 们 需要 使 用 checkboxSelectionMode1l， 它 会 在 每 行 数据 前 
添加 一 个 复 选 框 。 同 样 ， 我 们 这 里 还 是 要 修改 cm，SelectionModel 对 象 即 sm， 它 在 总 体 上 控制 
用 户 对 表格 的 选择 功能 。 以 前 这 类 多 选 选择 功能 都 可 以 利用 Shift 或 Ctrl 键 实 现 ， 现 在 都 要 与 复 选 
框 关 联 上 了 。 
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首先 我 们 要 创建 一 个 sm， 也 就 是 checkboxselectionModel () 。sm 身 兼 两 职 ， 使 用 时 既 要 
放 到 cm 里 ， 也 要 放 到 表格 中 ， 如 下 面 的 代码 所 示 。 


Var sm = new Ext.grid.CheckboxSelectionModel{(); 
Var cm = new Ext .grid,ColumnModelt{l[ 
new Ext .grid.RowNumberer{(), 
sm, 
{header: ' 编 号 ' ,dataIndex: 'id'})， 
{header: ' 性 别 ' ,dataIndex:'sex'}，, 
{header:' 名 称 ' ,dataIndex: 'name'】}，, 
(header: ' 描 述 ' ,dataIndex:'descn')} 
js 
var grid = new Ext .grid.GridPanel ({ 
renderTo: 'grid', 
store: store, 
cm: cm， 
sm: sm 
}); 


显示 效果 如 图 3-22 所 示 。 
该 示例 在 03.grid/06-02-01.html 中 。 





注意 ”虽然 CheckboxMode1lSection 允 许 我 们 使 用 复 选 框 选中 表格 里 的 多 行 ,但 是 如 果 在 操作 过 
程 中 不 愤 选 中 了 某 一 行 ， 就 会 变 成 选中 一 行 的 情况 。 有 没有 办 法 取消 原始 的 选择 功能 ， 只 允 
许 用 户 通 过 复 选 框 执行 选中 操作 呢 ? 可 以 ， 只 需要 重 设 行 选择 事件 的 处 理 函 数 ， 如 下 所 示 : 


var sm = new Ext.grid.CheckboxSelectionModel{{handleMouseDown: Ext .emptyFn}}; 





v 
1 :地 1 male nearne1 descnt 
2 | 峡 : 2 fernale name2 descon2 
3 | 峡 ; 3 male Name3 descn3 
4 VI 4 female name4 descn4 
5 | 区 5 male Names descns 


图 3-22 ” 复 选 框 多 选 行 


3.7 ”选择 模型 


表格 里 提供 的 这 种 功能 称 为 选择 模型 。 例 如 , 当 单 击 某 一 个 单元 格 时 , 被 选中 的 却 是 整个 行 。 

在 定义 Ext .grid.GridPanel 时 ， 默 认 使 用 RowSelectionModel 行 选择 模型 。 行 选择 
模型 是 默认 支持 多 选 的 ， 上 鼠标 单 击 时 按 住 Shif 或 Ctrl 键 就 可 以 选择 多 行 。 如 果 只 希望 选择 一 行 ， 
需要 设置 singleSselect 人 参数 。 

如 下 面 的 代码 所 示 : 
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Var grid = new Ext .grid.GridPanel({ 
renderTo: ‘grid', 
store: store, 
cm:; cm, 
sm: new Ext .grid.RowSelectionModel ({singleSelect:true}) 


Fj 

这 样 ， 即 使 按 着 Ctrl 或 者 Shif 键 也 不 会 选中 多 行 了 ， 只 会 突出 显示 最 后 选中 的 一 行 。 

该 示例 在 03.grid/07-01.html 中 。 

另外 一 种 选择 模型 是 cel11SelectionMode1 一 一 单元 格 选择 模型 。 每 次 只 允许 选择 一 个 单元 
格 ， 在 EditorGriGd 里 默认 使 用 的 就 是 cellSselectionModel。 当 然 ， 也 可 以 将 EQitorGrid 的 选 
择 模 型 设置 为 RowSelectionModel， 从 而 达到 选中 一 行 的 效果 。 

可 能 大 家 会 问 :“ 选 择 模型 具体 有 什么 用 ? 我 还 是 不 知道 如 何 读 取 选 中 的 行 呀 .” 例 如， 当 单 
击 某 一行 时 就 会 弹出 一 个 对 话 框 ， 并 且 显 示 当 前 行 的 一 些 信息 。 

这 就 需要 用 到 选择 模型 了 ， 如 下 面 的 代码 所 示 。 


grid.on('click', function() 1{ 
var selections = grid.getSelectionModel() .getSelections!(); 
for (var i = 0; i < selections.length; i++) { 
Var record = Selections [ij]; 
Ext .Msg .alert (' 提 示 '， record.get ("id") + "*," + record.get ("name") + "," + 
record.get ("descn")); 
} 
Fl; 


先 从 表格 里 获得 SelectionModel ， 再 从 选择 模型 中 获得 当前 选中 的 数据 ， 
selections .length 是 选中 的 记录 条 数 。 循 环 读 取 selections， 里 面 的 每 一 个 元 素 都 是 一 条 记 
录 ， 所 有 的 数据 都 在 它 里 面 。 如 果 需 要 判断 是 否 选择 了 记录 ， 只 需要 判断 selections .length 
是 否 等 于 0 即 可 。 

该 示例 在 03.grid/07-02.html 中 。 





注意 ”下面 说 一 些 题 外 话 ，EXT 的 树 形 组 件 里 也 有 两 种 选择 模型 ， 默 认 的 DefaultSselection- 
Modael 每 次 只 能 选择 一 个 节点 ， 另 外 还 有 一 个 MultiSselectionMode1l， 它 可 以 使 用 Ctrl 键 
(注意 ， 不 允许 使 用 Shift 键 ) 选择 多 个 节点 。 


3.8 ”表格 视图 Ext .grid.Gridview 


EXT 的 表格 控件 都 遵守 MVC 模 型 ，Fxt.data.store 可 看 作 模 型 ( Model ) ， 
Ext .grid.GridPanel 中 设置 的 各 种 监听 器 可 看 作 控 制 器 (Controller),， 而 Ext .grid .GridvView 
对 应 的 就 是 视图 (View)。 通 常情 况 下 ， 不 需要 自行 创建 Ext .grid.Gridview 的 实例 ， 
Ext .grid.GridPanel 会 自动 生成 对 应 的 实例 ， 使 用 默认 的 样式 将 表格 显示 到 页 面 上 。 当 希望 操 
作 Ext .grid.Gridview 的 属性 时 ， 可 以 通过 Ext .grid.GridPanel 的 getvView() 函数 来 获取 当 
前 表格 使 用 的 视图 实例 ， 如 下 面 代码 所 示 。 
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Ext .get ('scroll').on('click', function() { 
grid.getView(}) .scrollToTop(}; 

下 

Ext .get (‘focus')}.on('click', function() { 
grid.getView{) .focusCell{(0, 0}); 


var cell = grid.getView() .getCell(0, 0); 
cell.style.backgroundColor = 'red'; 
EF}? 
我 们 设置 了 两 个 按钮 “scroll to top” 和 “focus cell”。 


D 单 击 “sceroll to top” 按 钮 ， 会 调用 grid.getView() .scrollToTop() 函数。 该 函数 的 作 
用 是 ， 当 GridView 的 右 侧 显 示 滑动 条 时 ， 自 动 将 滑动 条 滚动 到 最 上 面 的 位 置 。 

O 单 击 “focus cell” 按 钮 ， 首 先 调用 focuscel1 (0,0) 将 焦点 放 在 表格 的 第 一 行 的 第 一 个 单 
元 格 上 ， 然 后 将 这 个 单元 格 的 背景 设置 为 红色 。 

上 面 示例 显示 的 效果 如 图 3-23 所 示 。 


exoll to top | Focus celi | 


这 个 单元 疾 号 名 入 手术 日 期 

人 里 人 neme1 descnl 1970-01-15 了 
2 name2 descn2 1970-01-15 
人 Deene 7 Haecm’3 QT7AN N14 人 大 a | 


图 3-23 ”GridView 滚 动 到 顶端 并 选中 某 个 单元 格 


从 图 3-23 中 可 以 看 到 ， 与 GridView 相 关 的 操作 都 集中 在 视图 的 显示 功能 部 分 。 如 果 要 对 表格 
的 显示 效果 进行 调整 ， 可 以 通过 GridView 进 行 设置 ， 但 是 gria.getview() 必须 在 创建 
Ext .grid.GridPanel 之 后 调用 ， 它 只 能 获得 Ext .grid.GridPanel 中 创建 好 的 GridView 实 例 。 
如 果 我 们 希望 在 创建 GridView 时 设置 一 些 初始 参数 ， 可 以 使 用 Ext .gria.Gridpanel 的 
viewConfig 参 数 ， 如 下 面 的 代码 所 示 。 


var grid = new Ext.grid.GridPanelt{{ 
height: 80, 
width: 450, 
renderTo: 'grid', 
store: new Ext.data.Storelt 
autoLoad: true, 
proxy: new Ext .data.MemoryProxy (data), 
reader: new Ext.data.ArrayReadGer ({}, meta) 
后 
columns: meta, 
viewConfig: { 
columnsText : ' 显 示 的 列 '， 
scrollOoffset: 30, 
sortAscText : ' 升 序 '， 
sortDescText : ' 升 序 '， 
forceFit: true 
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viewConfig 中 的 参数 会 在 GridView 创 建 时 作为 初始 化 参数 传递 给 GridView， 上 例 中 列举 了 
日 常 开发 中 常用 的 一 些 参数 ， 如 下 所 示 。 
D columnsText、sortAscText 、sortDescText 这 3 个 参数 分 别 用 来 设置 表格 中 每 列 的 下 
拉 菜 单 中 的 “显示 的 列 ”“ 升 序 ” “降序 ”这 3 个 部 分 显示 的 文字 。 
口 scrolloffset 表 示 表 格 右 侧 为 滚动 条 预 留 的 宽度 ， 默 认 是 20 px。 
D forceFit 参 数 为 true 时 ， 表 格 会 自动 延展 每 列 的 长 度 ， 使 内 容 填 满 整 个 表格 。 


上 例 的 页 面 效果 如 图 3-24 所 示 。 
: 编 和 了 名称 雹 述 日 了 
1970-01-15 





图 3-24 ”使 用 viewconfig 为 GridView 设 置 参 数 


EXT 中 基于 GridView 创 建 了 可 以 提供 更 多 扩展 功能 的 视图 组 件 ， 比 较 常 用 的 有 分 组 视图 
GroupingView 和 可 以 支持 数据 缓冲 的 BufferedGridView。 有 关 GroupingView 的 介绍 在 3.13 节 中 ， 
BufferedGridView 作 为 Ext 3.0 扩 展 的 一 部 分 包含 在 发 布 包 中 ， 有 关 它 的 介绍 在 第 14 章 中 。 


3.9 表格 分 页 


一 次 性 将 成 千 上 万 条 数据 显示 在 表格 里 ， 然 后 拖 动 滚动 条 查看 数据 ， 显 然 不 是 什么 好 主意 ， 
在 效率 上 也 是 不 允许 的 。 

实际 上 ， 表 格 控件 对 性 能 的 要 求 较 高 。 在 一 个 页 面 上 放 3 个 表格 ， 就 可 以 感觉 到 响应 变 慢 。 
在 每 个 表格 里 显示 上 干 条 数据 ， 效 率 就 可 想 而 知 了 。 

所 以 说 分 页 是 必 不 可 少 的 ， 而 EXT 提 供 了 方便 地 集成 分 页 工具 条 的 方式 。 


3.9.1 为 表格 添加 分 页 工具 条 
在 先前 示例 中 的 表格 上 添加 几 行 代 码 ， 如 下 所 示 。 


var grid = new Ext ,grid.GridPanel l(t{ 

renderTo: ‘grid', 

autoHeight: true, 

store: store, 

cm: cm, 

bbar: new Ext.PagingToolbarl(t{ 
pageSize: 10, 
store: store, 
GisplayInfo: true, 
displayMsg: ' 显 示 第 {0} 条 到 {1} 条 记录 , 一 共 {2) 条 '， 
emptyMsg: "没有 记录 " 
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}) 
和 
store.load!(}; 


我 们 新 增 了 一 个 bbar 属 性 ， 并 且 创 建 了 Ext .PagingToolbar 分 页 工具 条 对 象 。 

分 页 工具 条 的 属性 如 下 所 示 。 

口 pageSize: 每 页 显示 几 条 数据 。 

口 displayInfo: 是 否 显示 数据 信息 。 

口 displayMsg: 只 有 当 displayInfo:true 时 才 有 效 , 用 来 显示 有 数据 时 的 提示 信息 , {0)}、 

{1}、{2} 会 自动 被 替换 成 对 应 的 数据 。 

口 emptyMsg: 没有 数据 时 显示 的 信息 。 

不 过 要 注意 一 点 ， 如 果 配 置 了 分 页 工具 条 ，store.1oad() 就 必须 在 构造 表格 以 后 执行 ， 否 
则 分 页 工具 条 将 不 起 作用 。 应 该 将 分 页 工具 条 和 ads 相 关联， 从 而 实现 与 表格 共享 数据 模型 ， 分 页 





后 的 效果 如 图 3-25 所 示 。 

儿 号 名 称 增 述 

1 name1 (escn1 

2 name2 descn2 

3 name3 descn3 

4 name4 descnd 

二 pO er a 
:54:4 Pegefl oft 0 壬 示 第 1 条 间 渎 条 记录 ， 一 共 S 第 ! 

图 3-25 分 页 工具 条 


从 图 3-25 可 以 清晰 地 看 到 ， 在 表格 下 边 多 出 来 一 个 工具 条 ， 包 括 前 一 页 、 后 一 页 、 第 一 页 、 
最 后 一 页 、 刷 新 以 及 提示 信息 。 

该 示例 在 03.grid/09-01-01.html 中 。 

曾经 有 一 位 开发 者 在 使 用 过 程 中 提出 了 一 个 挺 奇怪 的 需求 一 一 让 pagingToolbar 右 对 齐 。 

这 应 该 是 非常 难 碰 到 的 需求 ，EXT 中 没有 直接 提供 配置 的 参数 。 尝 试 将 float :right 放 到 
CSS 中 ， 让 div 移 到 右边 ， 但 结果 是 style="float :right "没有 效果 ， 只 好 使 用 cls 指 定 一 个 定 
义 好 的 class。 

EXT 3.0 中 提供 了 更 多 效果 绚丽 的 分 页 组 件 ， 可 以 让 用 户 使 用 滑动 条 或 者 进度 条 实现 分 页 的 
效果 ， 这 些 扩展 组 件 可 以 在 第 14 章 中 找到 ， 本 节 示 例 在 03.grid/09-01-02.html 中 。 


注意 ”此 处 的 as 不 能 使 用 Ext.data.SimpleStore， 分 页 时 需要 调用 store 的 loadl() 函数， 而 


load() 通 数 与 Proxy 有 关 。SimpleStore 不 但 没有 设置 Proxy， 而且 也 没有 重 写 10ad () 
函数 ， 所 以 会 出 现 错误 ， 从 而 导致 无 法 显示 分 页 信息 。 


3.9.2 通过 后 台 脚 本 获得 分 页 数据 
表格 每 次 都 会 显示 Gs 中 的 所 有 数据 ,我 们 无 法 利用 静态 数据 很 好 地 演示 分 页 。 于 是 ,必须 写 
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后 台 脚 本 ， 让 EXT 与 后 台 进 行 数据 交互 ， 这 样 才能 看 到 真实 的 分 页 效果 。 

尽量 在 原来 示例 的 基础 上 修改 ， 把 注意 力 集中 在 关键 部 分 。 

使 用 JSP 来 写 后 台 代 码 。 至 于 后 台 语 言 ， 不 论 是 ASP 还 是 JSP， 只 要 返回 的 数据 格式 符合 要 求 
即 可 ， 即 Ajax 与 后 台 无 关 。 也 就 是 说 ， 不 管用 什么 语言 编写 后 台 代 码 ， 前 台 的 EXT 代 码 都 一 样 ， 


如 代码 清单 3-2 所 示 。 
代码 清单 3-2 ”用 JSP 编 写实 现 分 页 功能 的 后 台 和 代码 
已 名 


String start request .get Parameter ("start"); 
String limit = request .getParameter("limit"); 
try 1 

int index = Integer.parselInt (start)}):; 

int pageSize = Integer.parseInt {limit); 


String json = "{totalProperty:100,root:["; 
for (int i = index; i < pageSize + index; i+r+r+) { 
json += "fid:* + i + *,name:'name" + i + "',descn:'descn" + i + "“'}*; 
if (i != pageSize + index - 1) { 
json += ",*; 
} 
} 
json += *“]}*; 
response.getWriter{) .write(json}); 
} catch (Exception ex) { 
} 
SC> 


下 面 我 们 来 解读 这 段 JSP 代 码 。 

9 在 进行 操作 之 前 ， 先 要 获得 EXT 传 递 过 来 的 两 个 参数 : start 和 1imit。start 指 示 从 第 
几 个 数据 开始 显示 ; 1imit 指 从 start 开 始 一 共 要 用 多 少 条 数据 。 当 然 ， 返 回 的 数据 可 能 
会 小 于 这 个 值 。 

D 在 后 台 模 拟 对 100 条 数据 进行 分 页 ， 在 获得 了 start 和 1imit 之 后 生成 JISON 格 式 的 数据 。 

什么 是 JSON? 在 讲解 理论 之 前 先 看 看 示例 ， 建 立 一 下 感性 认识 。 

模拟 EXT 访 问 后 台 ， 并 传递 两 个 参数 start=0&limit=10， 把 获得 的 数据 稍微 整理 一 下 ， 如 

下 所 示 。 


{totalProperty:100,root:![ 
{id:0,name: 'name0',descn: 'descn0'}, 


{id:1,name: 'namel',descn:'descnl'}, 
{id:2,name: 'name2',descn: 'descn2'), 
{id:3,name: 'name3',descn: 'descn3'}, 
{id:4,name: 'name4',descn: 'descn4'}, 
{id:5,name: 'nameSs',descn: 'descn5'}, 
{id:6,name: 'name6',descn: 'descn6'}, 
{id:7,name: 'name7' ,descn: 'descn7'}, 
{id:8,name: 'name8',descn: 'descn8')}, 
{id:9,name: 'name9',descn: 'Gescn9'} 
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请 记 住 这 个 数据 格式 ， 不 管 后 台 是 什么 ， 只 要 满足 了 这 样 的 格式 要 求 ，EXT 就 可 以 接受 并 处 
理 ， 然 后 显示 到 表格 中 。 

这 里 先 不 介绍 JSON， 只 需要 知道 JSON 里 除了 name 〈 名 称 ) 就 是 value ( 值 )。 值 有 好 几 种 
格式 ， 如 果 是 数字 ， 不 用 加 引号 ; 如 果 加 了 引号 ， 就 是 字符 串 ; 如 果 用 [] 包 囊 ， 就 是 数组 ; 如果 
出 现 {1}， 就 说 明 是 嵌 套 的 JSON， 诸 如 此 类 。 

简单 看 一 下 JSON 数 据 ， 开 头 就 是 totalProperty:100， 这 里 表示 一 共有 100 条 数据 。 然 后 
就 是 root : [] ，root 对 应 着 一 个 数组 ， 数 组 里 有 10 个 对 象 ， 每 个 对 象 都 有 ia、name 和 descn。 这 
10 条 数据 最 后 就 应 该 显示 到 表格 里 。 

JSP 用 for 循 环 生成 root 数 组 里 的 数据 ， 这 样 翻 页 时 就 可 以 看 到 数据 的 变化 。 和 否则 每 次 都 是 
一 样 的 数据 ， 我 们 不 知道 翻 页 是 否 起 了 作用 。 最 后 ， 把 得 到 的 JSON 字 符 串 输出 到 response 里 ， 
EXT 就 可 以 获得 这 些 数据 了 。 

现在 已 经 确定 JSP 可 以 返回 我 们 所 需要 的 数据 了 ， 可 以 不 管 后 台 是 用 什么 语言 写 的 ， 直 接 切 
入 EXT 人 代码， 看 看 它 是 如 何 与 后 台 交互 并 获得 这 些 数据 的 。 

因为 引入 了 JSON 作 为 数据 传输 格式 ， 所 以 这 次 要 对 前 几 个 示例 的 代码 进行 一 次 大 的 修改 ， 


具体 步骤 如 下 。 
(1) 换 掉 Proxy， 不 再 到 内 存 中 查找 ， 而 是 通过 HTTP 获 得 我 们 想 要 的 数据 。 
由 Bp Proxy: new Ext.data.HttpProxy ({uri:'08_02_01.jsp'}), 


创建 HttpProxy 的 同时 ， 用 ur1 这 个 参数 指定 获取 数据 的 路 径 ， 我 们 这 里 设置 成 09_02_01. 
jsp， 也 就 是 我 们 刚才 讨论 的 JSP 脚 本 。 
(2) 现在 不 再 是 解析 简单 的 数组 ， 而 是 换 成 JsonReader， 如 下 面 的 代码 所 示 。 


reader: new Ext .data.JsonReader (ft 
totalProperty: 'totalProperty', 
root: ‘root'"' 

ee 碟 
{name: 'id'}, 
{name: ‘name'}, 
{name: 'Gescn'} 


用 

注意 ,这 里 比 ArrayReader 多 了 什么 ? totalProperty 对 应 JSP 代 码 中 返回 的 totalProperty， 
也 就 是 数据 的 总 数 。root 对 应 JSP 代 码 中 返回 的 rocot， 也 就 是 一 个 包含 返回 数据 的 数组 。 

(3) 最 后 ， 在 初始 化 时 通过 传 参数 去 获得 希望 得 到 的 那 部 分 的 数据 ， 如 下 面 的 代码 所 示 。 


store.load{{params: {start:0,limit:10}}); 

上 面 代码 中 ， 在 store 进 行 加 载 时 额 处 传递 了 两 个 参数 (start 和 1imit) ， 这 是 告诉 后 台 
程序 从 第 1 条 数据 开始 ， 最 多 读 取 10 条 。 

不 过 ， 如 果 按 照 我 们 以 前 的 设置 ， 表 格 是 无 法 正常 显示 的 。 因 为 store.1oad() 无 法 在 
grid.render() 前 准备 好 所 有 数组 , 所 以 它 不 知道 应 该 显示 多 高 。 我 们 需要 为 表格 指定 一 个 固定 
的 高 度 , 如 <div id="grid" style="height:265px;"></div>, 或 者 为 它 添加 一 个 autoHeight: 
true 参 数 ， 让 它 自 己 计 算 高 度 。 

最 后 ， 我 们 就 可 以 使 用 分 页 条 上 那些 按钮 ， 试 试 分 页 的 功能 。 前 台 JavaScript 脚 本 内 容 如 下 
所 示 : 
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Var cm = new Ext .gridQ.ColurnModel([ 
{fheader: ' 编 号 ' ,dataIndaex:'id')， 
{header:; ' 名 称 ' ,dataIndex: 'name']， 
{header:' 描 述 ', dataIndex: 'descn'} 


Var store = new Ext .Gata.Storet{t 
proxy: new Ext.data.HttpProxy{{url:'09 02 01.jsp'}), 
reader: new Ext .data.JsonReader{{ 
totalProperty: ‘totalProperty', 
= | 这 


{name: ‘id'}, 
{name: 'name'}, 
{name: 'descn'} 


] ) 


var grid = new Ext.grid.GridPpanelt{t{ 
renderTo: 'grid', 
autoHeight: true, 
store: store, 
cm: cm, 
bbar: new Ext.PagingToolbar({ 
pageSize: 10, 
store: store, 
displayInfo: true, 
displayMsg: ' 显 示 第 {0} 条 到 {1} 条 记录 , 一 共 {2} 条 '， 
emptyMsg: "没有 记录 " 
}) 
Ps 
store.loadl({params: {start:0,1limit:10}}); 


该 示例 在 03.grid/09-02-01.html 中 人 ，JSP 文 件 在 03.grid/09_ 02 01.jsp 中 ， 浏 览 效果 如 图 3-26 








所 示 。 
编号 省 称 坑 述 
40 name40 descn40 
| dt name41 vescns1 
42 name42 descn42 
; 43 name43 descn43 
i 44 name44 descn44 
| 45 name45 descn45 
46 name46 descnd46 
47 Petrme47 descn47 
48 name48 descn48 
49 name49 descn49 


pop tio 国 时 gt ms se, 00 
图 3-26 使 用 后 台数 据 分 页 


QD 此 实例 需要 后 台 服 务 器 的 支持 , 可 以 在 光盘 的 apache-tomcat-5.5.28\webapps\ext-3.0.0\examples\03.grid 目 录 下 找到 
该 实例 的 HTML 和 JSP 页 面 。 
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3.9.3 ”分 页 工具 条 显示 在 表格 的 顶部 


除了 bbar 以 外 ， 表 格 还 有 tbar， 即 上 方 的 工具 条 。 如 果 把 分 页 条 放 在 上 面 ， 效 果 也 是 一 样 
的 。 也 就 是 将 原来 的 bbar (bottom bar) 属性 修改 为 tbar (top bar)， 便 可 以 像 图 3-27 那 样 将 
工具 条 显示 到 表格 的 上 方 了 ， 该 示例 在 03.grid/09-03-01.html 中 。 


Var grid = new Ext .grid.GridPanel {1 

renderTo: ‘grid', 

store: store, 

cm: cm, 

tbar: new Ext.PagingToolbar!! 
pageSize: 10, 
store: store, 
displayInfo: true, 
displayMsg: ' 显 示 第 {0} 条 到 {1) 条 记录 ,一 共 {2} 条 '， 
emptyMsg: “没有 记录 " 


Pagej! of!1 莫 永 第 1 系 到 S 条 记 池 ,一 共 S 条 
病 等 名 有 迟 坊 球 
narnme1 descni1 
Name2 tdescn2 
name3 descn3 
四 name descrd 
5 Names descns 


图 3-27 ”顶端 放置 分 页 工具 条 


当然 ， 也 可 以 在 上 下 都 加 上 分 页 条 ， 因 为 它们 都 共享 同一 个 store， 在 功能 上 不 会 有 任何 问 
题 。 


3.9.4 让 EXT 支持 前 台 分 页 


前 台 分 页 一 次 性 从 后 台 把 所 有 数据 都 读 取 到 客户 端 , 然后 由 客户 端 自动 判断 每 次 显示 多 少 条 
数据 。 这 样 ， 分 页 时 就 不 用 再 去 后 台 读 取 数据 了 。 这 对 于 小 数据 量 的 分 页 是 非常 有 利 的 。 

不 过 ，EXT 里 并 没有 提供 这 样 的 功能 ， 表 格 只 是 把 得 到 的 所 有 数据 一 次 性 显示 到 表格 里 ， 无 
论 pageSize 设 置 为 多 少 都 不 会 起 作用 。 

虽然 EXT 并 没有 直接 为 我 们 提供 这 样 的 内 存 分 页 功能 , 但 是 在 EXT2.0 的 examples/iocale/ 目 录 
下 提供 了 一 个 PagingMemoryProxy.js 的 扩展 ， 它 可 以 让 我 们 从 本 地 数组 读 取 数 据 ， 并 且 实 现 内 存 
分 页 ， 具 体 使 用 步 又 如 下 所 示 。 

(1) 将 PagingMemoryProxy.js 从 examples/locale/ 目 录 下 复制 过 来 ， 导 入 到 HTML 里 。 


<script type="text/javascript" SrCc="pbagingMemorYyProxy .js"></SCripPt> 
(2) 把 以 前 的 MemoryProxy 换 成 PagingMemoryProxy。 
Var store = new Ext .data.SsStorelt{ 


proxy: new Ext.data.PagingMemoryProxy (data)}, 
reader: new Ext.data.ArrayReader({}, [ 
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{name: 'id'}, 
{name: 'name'), 
{name: ‘descn'} 
] ) 
} 


(3) 好 了 ， 现 在 直接 调用 as .1oad( {params:{start:0,1imit:3}})， 把 最 前 面 的 3 条 记录 
显示 出 来 吧 ， 如 图 3-28 所 示 。 





i Pape 有 of2 和 后 于 冰 且 1 条 鲁 3 各 记录， -其 5 条 ， 


图 3-28 前台 分 页 


(4) 可 以 在 前 台 台 生 成 JavaScript 数 组 ， 或 者 使 用 Ajax 读 取 后 台数 据 ， 再 传递 给 PagingMemory - 
Proxy， 以 此 实现 内 存 分 页 的 功能 。 
该 示例 在 03.grid/09-04-01.html 中 。 


3.10 后 台 排 序 


默认 情况 下 ， 表 格 只 能 对 当前 页 的 数据 进行 排序 。 如 果 想 要 对 所 有 数据 进行 排序 ， 则 需要 把 
排序 信息 提交 到 后 台 ， 由 后 台 将 排序 信息 组 装 到 SQL 里 ， 然 后 再 由 后 台 将 处 理 好 的 数据 返回 给 前 
2、 

这 就 是 前 台 与 后 台 交互 的 过 程 , 前 台 只 是 将 后 台 处 理 好 的 数据 显示 到 表格 里 , 后 台 只 需要 返 
回 格式 正确 的 数据 。 这 些 内 容 在 上 一 节 中 已 经 讲 到 ， 这 里 只 是 在 分 页 的 基础 上 加 上 了 排序 。 

既然 要 提交 到 服务 端 ， 便 需要 将 Ext .data. Store 的 remoteSort 属 性 设置 为 rmue， 这 个 属性 
是 指 是 否 允 许 远 程 排序 ， 默 认 值 为 false。 人 3 所 示 。 


代码 清单 3-3” 后 台 排 序 和。 
Var store = new Ext.data.Storelt 
Proxy: new Ext.data.HttpProxy ({url:'10_01.jsp'}}, 
reader: new Ext ,data.JsonReader({ 
totalProperty: ‘totalProperty', 
roOoOb3 ‘TOGt’ 


{name: 'id'}, 
{name: 'name'}, 


{name: ‘'descn'} 


remoteSort: true 
}); 


将 这 个 属性 值 设置 为 Lrue 后 ， 下 次 排序 时 就 会 有 变化 ， 不 会 立即 显示 出 排序 的 结果 ， 而 是 
向 后 台 提 交 了 两 个 参数 ， 分 别 是 sort 和 air。 sort 表 示 需 要 排序 的 字段 ， Gir 表示 升序 或 降序 
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(ASC/DESC)。 然 后 ， 后 台 根 据 这 些 参数 对 数据 进行 处 理 。 
该 示例 在 10_01.jsp 中 。 
使 用 JSP 编 写 的 后 台 排 序 代 码 如 代码 清单 3-4 所 示 。 


代码 清单 3-4 ”实现 后 全 排序 的 JSP 代 码 


< 
String start 
String limit 


request .getParameter ("start"); 
request .get Parameter ("limit"); 





String sort = redquest .getParameter("sort"); 
String dir = request .getParameter{"dir"); 
System.out .println(dir); 
if (dir == null} 1{ 

dir = "ASC",; 
} 


try { 
int index = Integer.parseInt (start); 
int pageSize = Integer.parseInt (limit); 


String json = "{totalProperty:100,root:["; 


if (dir.equals{("ASC")) { 
for {int i = index; i < pageSize + index; i++) 1 
json += "{id:" + i + ,name:'name"” + i + "*',descn:'descn" + i + "'}"; 
it {i != pageSize + index - 1) 1 
Jeon rs V7" 
} 





} 
} else { 
for (int i = pageSize + index; i > index; i--) { 
json += "{id:"* + i+ ",name:'name" + i + "',descn:'descn" + 1 + "'}"; 
if (i != index ~ 1) 1 
JO0N Ts Ti 
} ME Ra 一 
} 绩 号 省 称 攀 壕 
} 0 name0 descn0 


Bon 十 二 | ”于 


1 Farme1 descni 
response.getWriter() .write(json}; 2 ER US 

} catch (EXception ex 《 
} 3 name3 descn3 
多 > 4 named descnd 
| 3 5 Names descn5 
从 以 上 代码 中 可 以 看 出 ， 使 用 request. E nameé descn8 
getParameter() 就 可 以 得 到 那 两 个 参数 了 。 我 们 口 7 name7 descn7 
这 里 没有 连接 数据 库 ， 只 对 Gir 进 行 了 处 理 。 如 果 - ee ee 
9 nameg descn9 


是 nul1 或 asc， 返 回 的 数据 就 控 升 序 排列 ， 如 果 是 Rar 
pgsc， 返 回 的 数据 就 按 降序 排列 ， 结 果 如 图 3-29 所 一 
不 。 图 3-29 ”后 人 台 排 序 
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在 JSP 代 码 中 ， 根 据 排序 的 方式 执行 i++ 或 i-- 操 作 。 如 果 用 SQL， 那 么 就 会 更 简单 。 直 接 用 
这 两 个 字段 就 可 以 编写 出 需要 的 SQL 语句 ， 如 下 面 的 代码 所 示 。 


String sql = "Select * from t_USer order by " + SOIE + * "+ dir; 


其 实 它 就 是 为 SQL 而 准备 的 。 
该 示例 在 03.grid/10-01.html 中 。 


3.11 可 编辑 表格 控件 一 一 EditorGrid 


相信 大 家 都 使 用 过 Microsoft Excel， 它 的 功能 很 强大 ， 用 户 可 随意 添加 或 删除 表格 中 的 行 和 
列 ， 而 且 只 保存 一 次 即 可 。EditorGrid 也 提供 了 这 些 功 能 ， 可 以 直接 在 表格 里 执行 添加 、 删 除 、 
修改 和 查找 等 操作 ， 然 后 一 次 性 保存 。 

还 可 以 动态 修改 某 个 单元 格 ， 这些 单元 格 我 们 先 暂 定 不 能 为 空 ， 保存 时 会 进行 检测 ， 为 空 就 
无 法 保存 ， 验 证 信息 会 给 予 提示 。 


3.11.1 制作 一 个 简单 的 EditorGrid 
首先 ， 同 样 是 定义 列 ， 如 下 面 的 代码 所 示 。 


var cm = new EXxCc.griaQ.ColumnModaGel([ 
{header: ' 编 号 ' ,dataIndex: 'id' editor:new Ext.grid.Gridgditor (new Ext.form. 
TextField!lt 
allowBlank: false 
人 和 有 肠 融 
itheader:' 名 称 ' ,dataTndex: 'name' ,editor:new Ext .grid.GridEditor (new Ext .form. 
TextFieldlt{ 
aliowBlank: false 
Ey 
{header: ' 描 述 ', dataIndex: 'descn' ,editor:new Ext .grid.GridEditor (new Ext .form, 
TextFieladt{t{ 
allowBlank: false 
FyY3 
J}s 


大 家 可 以 看 到 ， 我 们 现在 给 每 列 增加 editor 属 性 ， 里 边 的 属性 都 是 完全 一 样 的 TextField。 
假设 它 就 是 用 来 编辑 单元 格 的， 接着 往 下 看 。 
Var grid = new Ext .grid.FditorGridpanel ({ 
renderTo: ‘grid', 
StOre: Store, 





Fh 

在 这 里 ， 我 们 发 现 除了 在 GriaPane1 的 前 面 多 了 个 Editor 外 ， 其 他 的 部 分 并 没有 什么 变化 。 
可 是 看 到 的 结果 是 ， 现 在 可 以 用 TextField 的 方式 随意 修改 单元 格 。 记 得 不 能 让 单元 格 为 空 ， 否则 
无 法 修改 。 

默认 情况 下 ， 需 要 双击 单元 格 才能 激活 编辑 器 ， 从 而 进行 修改 。 不 过 ， 也 可 以 给 表格 配置 上 
clicksToEdit :1， 这 样 就 可 以 通过 单 击 单元 格 激活 编辑 器 ， 从 而 进行 修改 ， 如 图 3-30 所 示 。 
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妖 号 儿 称 雹 可 

1 nearme1f descnl 

2 name2 descn2 

3 name3 |descn3l 四 
4 Naimed descn4 

naeme5 descns 





图 3-30 通过 单 击 修改 单元 格 


TextField 不 允许 输入 空 值 ， 因 为 在 创建 ColumnModel 时 为 对 应 的 editor 设 置 了 
allowBlank:false 属 性 ，allowBlank:false 表 示 不 允许 在 rextField 中 输入 空 值 。 
完整 代码 如 下 所 示 : 


Var cm = new Ext .grid.CoiumnModel([t 
header: ' 编 号 '， 
dataIndex: 'id', 
editor: new Ext .grid.GridEditor! 
new Ext.form,TextField!(t 
allowBlank: failse 
Fy 
) 
ja 和 
header: ' 名 称 '， 
dataIndex: 'name', 
editor: new Ext .grid.GridEditort 
new Ext .form.TexcFiela(( 
allowBlank: false 
}) 
) 
}, 
header: ' 描 述 '， 
dataIndex: ‘'descn', 
editor: new Ext.grid.GridEditor'!( 
new Ext.form.TextFieldlf{ 
allowBlank: false 
}) 
) 


bs 


Var data = [ 
['1l','namel', ‘descnl'), 
['2','name2','descn2°'], 
[3 "name3', descn3' ]; 
('4','name4','descn4'], 
['5','name5', 'descn5']) 
}; 
Var store = new Ext.data.Storelt 
Proxy: new Ext.data.MemoryProxy (data}), 
reader: new Ext.data.ArrayReader({}, | 
{name: '1id'}, 
{name: 'name'}, 
{name: 'descn'} 
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store.1load!(); 
var grid = new Ext .grid.EditorGridPpanel lt{ 
autoHeight: true, 
renderTo: 'grid', 
store: store, 
cm: cm 
到 导 ， 


该 示例 在 03.grid/11-01-01.html 中 。 


3.11.2 ”添加 一 行 数 据 


对 可 编辑 的 表格 来 说 ， 添 加 、 删 除 、 修 改 和 查找 是 最 基本 的 功能 ， 不 然 编辑 就 失去 了 意义 。 

首先 使 用 Record 的 create 方 法 创建 一 个 记录 集 MyRecord。MyRecord 其 实 相当 于 一 个 类 ， 
该 类 包含 了 记录 和 集 的 定义 信息 ， 可 以 通过 MyRecord 来 创建 包含 字段 的 Record 对 象 ， 如 下 面 的 代 
码 所 示 。 


var MyRecord = Ext .data.Record.createtl! 
{name: 'id', type: 'string')}), 
{name: 'name', type: 'String' )， 
{name: ‘descn', type: 'string')} 

下 于 


现在 我 们 要 两 个 按钮 ， 一 个 可 以 添加 行 ， 另 一 个 执行 反 向 操作 (删除 行 )， 暂 且 就 把 它们 放 
到 表格 的 首部 。 

在 代码 清单 3-5 中 ， 我 们 可 以 通过 MyRecord .getField("name") 得 到 记录 中 name 列 的 字段 
信息 ， 通 过 p.get ("name") 可 以 得 到 记录 name 字 段 的 值 ， 而 通过 p .aata.name 同 样 能 得 到 记录 
集中 name 字 段 的 值 。 如 果 对 Record 有 一 定 的 了 解 ， 那 么 要 操作 记录 集中 的 数据 就 非常 简单 了 ， 
比如 p.set (name,value) 可 以 设置 记录 中 某 指定 字段 的 值 ，p.Girty 可 以 判断 当前 记录 是 否 有 
字段 的 值 被 更 改过 ， 等 等 。 


代码 清单 3-5 ”添加 与 删除 行 


var grid = new Ext .grid.EditorGridpanell(t{ 
renderTo: ‘grid', 
store: store, 
cm:; cm, 
tbar: new Ext.Toolbar(['-', { 
text : ' 添 加 一 行 '， 
handler: functiont{})t{ 
var p = new MyRecoradl(lt 
Le 
name:'', 
Gescn:'' 
的 时 
grid.stopEditing!(); 
store.insert (0, p); 
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grid.startEditing(0, 0}); 
} 
bn ,4 
cexc: ' 删 除 一 行 '， 
handler: function{})! 
Ext .Msg .confirm{ ' 信 息 '， ' 确 定 要 删除 ? '， function (btn){ 
i CEN "VES 
var sm = grid.getSelectionModel] (); 
Var cell = sm.getSelectedCell]l1{); 
Var record = store.getAt (cell[0]); 
store.remove (record); 


Ts 


在 上 面 的 代码 中 ， 我 们 通过 tbar 创 建 一 个 工具 条 ， 然 后 在 这 个 工具 条 里 放 两 个 按钮 :一 个 
叫 “ 添 加 一 行 ”， 另 一 个 叫 “ 删 除 一 行 ” 它们 用 text 定 义 按钮 显示 的 文字 ，hanaler 定 义 按 钮 被 
按 下 时 执行 的 函数 。 

我 们 来 看 看 “添加 一 行 ” 按 钮 里 执行 的 函数 : 首先 新 建 一 个 MyRecord (记得 给 里 面 的 属性 
赋值 ， 否 则 EditorGrid 最 后 显示 的 内 容 就 会 混乱 ， 然后， 关闭 表格 的 编辑 状态 ， 再 把 我 们 刚才 创 
建 的 MyRecord 插 入 store 的 第 一 行 ,数据 模型 一 旦 改变 , 表格 也 会 立即 改变 ,start ingEditing () 
激活 第 1 行 第 1 列 的 编辑 状态 ， 提 示 你 最 好 现在 就 开始 写 数据 。dirty 和 modifed 的 操作 是 为 了 表 
格 对 脏 数据 部 分 特殊 显示 ， 也 就 是 上 面 所 说 的 数据 是 否 被 更 改过 。 

示例 中 的 删除 函数 先 获得 表格 的 选择 模型 ， 

从 选择 模型 中 获得 选中 的 单元 格 。 这 个 单元 格 有 ea 
两 个 属性 ， 第 一 个 是 行 号 ， 第 二 个 是 列 号 。 我们 jws 并 ep 济 玉 
通过 行 号 得 到 store 这 一 行 对 应 的 Record, 然后 让 人 


ore NY 


移 除 即 可 。 ! 1 name1 descnl1 


就 这 样 ， 我 们 完成 了 添加 和 删除 的 操作 , 并 。 om 5 
且 尝 试 了 工具 条 的 用 法 。 另外 ， 请 注意 ， 两 个 按 4 neamed4 descn4 
钮 之 间 的 '-' 是 分 隔 符 ， 适 当 使 用 可 以 使 工具 条 
中 的 按钮 显得 排列 有 序 ， 如 图 3-31 所 示 。 图 3-31 添加 和 删除 按钮 


完整 代码 如 下 所 示 : 


var cm = new Ext .grid.ColumnModell([t 
header: ' 编 号 '， 
dataIndex: 'id', 
editor: new Ext .grid.GridEditor{ 
new Ext.form.TextFieidlt{ 
allowBlank: false 
}) 
) 
FA 
header: ' 名 称 '， 
dataIndex: ‘name', 
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editor: new Ext .grid.GridEditor't 
new Ext.form.TextField!{t{ 
allowBlank: false 
}) 
) 
Ez 
header: ' 描 述 ' ， 
dataIndex: ‘descn', 
editor: new Ext .grid.GridEditort 
new Ext.form.TextField!(t 
allowBlank: false 
}) 


的 区 


Var data = | 
['1', 'namel', 'descn1l' |), 
['2', 'name2','descn2'], 
['3', 'name3','descn31:], 
[1'4','name4','descn4' ]， 
{'5', 'name5','descn5'] 


var store = new Ext .data.Sstorel(t{ 
proxy: new Ext .data.MemoryProxy (Gata) ， 
reader: new Ext.data.ArrayReader({}, [ 
{name: 'id'}, 
{name: 'name'}, 
{name: ‘Gescn'} 
] ) 
区 


var Record = Ext .data.Record.create{l[ 
{name: 'id', type: 'string'}, 
{name: 'name'’, type: 'string'}, 
{name: 'descn', type: ‘string'} 

ja 

Store,1load () :; 


Var grid = new ExL.gridQ.EdaitorGridpPanel 1(({ 
autoHeight: true, 
renderTo: 'grid', 
store: store, 
cm: cm, 
tbar: new Ext.Toolbar(['-', 1 
text : ' 添 加 一 行 ' ， 
handler: function()t 
Var p = new Recordl(t 
Le 
name:"', 
descn:''" 
})? 
grid.stopEditing!(); 
store.insert (0, p); 
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grid.startEditing{(0, 0); 


六 二 
text : “删除 一 行 ' ， 
handler: function({)t 
Ext .Msg .confirm{' 信 息 '，' 确 定 要 删除 ? '， function({btn){ 
if btn se vee) { 
var sm = grid.getSelectionModel (); 
Var cell = sm.getSelectedCell(); 





Var record = store.getAt {cell[0]); 
store.remove{record); 


该 示例 在 03.grid/11-02-01.html 中 。 


3.11.3 ”保存 修改 结果 


大 家 注意 ， 必 须 使 用 上 节 中 介绍 的 添加 行 的 方式 ， 才 能 保证 从 store .modified 获 得 新 增 的 
行 ， 否 则 可 能 出 现 校 验 错 误 。 
首先 在 工具 条 上 添加 一 个 保存 按钮 ， 实 现 方法 如 代码 清单 3-6 所 示 。 


代码 清单 3:6 “为 王 具 条 添加 和 哥 存 按 铀 


{ 
text: "保存 ' ， 
handler: function{(}{ 
var m = store.modified.slice(0); 
var jsonArray = []; 
Ext .each(m, function(item) { 
jsonArray .pushl(item.data); 


Ext .lib.Alax.request!{ 
Sx he 
Lk Rh 洒 写 到 
{success: function(response}t{ 
Ext .Msg .alert (' 信 息 ',， response.responseText, function{)1 
store,.reload!(); 
下 
},failure: function()t{ 
Ext .Msg .alert {" 错 误 "， "与 后 台 联 系 时 出 现 了 问题 "); 
Fj 
"Gata=” + encodeURIComponent (Ext .encode{jsonArray)) 


} 


上 面 示 例 的 大 概 流程 是 这 样 的 ， 首 先 获得 store 中 修改 过 的 数据 ， 然 后 放 到 JSON 数 组 里 ， 
用 Ajax 提交 给 后 台 ， 最 后 根据 后 台 返 回 的 结果 显示 成 功 或 失败 信息 。 请 注意 ，success 是 请 求 成 
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功 后 返回 的 信息 ，failure 是 请 求 失败 后 返回 的 信息 ， 与 业务 处 理 成 功 或 失败 没有 关系 ， 这 里 很 
容易 搞 混 清 。 

上 面 的 示例 用 到 了 数组 对 象 的 Slice (start, [end] ) 方 法 ， 该 方法 返回 一 个 新 数组 ， 包 含 了 
源 函 数 从 start 到 ena 所 指定 的 元 素 ， 但 是 不 包括 ena 元 素 ， 比 如 a.slice(0,3)。 如 果 start 为 
负 ， 则 将 它 作 为 length+start 处 理 ( 此 处 iength 为 数组 的 长 度 ， 比 如 a.slice(-3,4)， 相当 于 
a.slice(2,4)) 。 如 果 engd 为 负 ， 就 将 它 作 为 length+end 处 理 (此 处 length 为 数组 的 长 度 ， 比 
如 a.slice(0,-1))。 如 果 省 略 end, 那么 slice 方 法 将 一 直 复 制 到 源 数组 结尾 , 比如 a. slice(1)。 
如 果 enda 出 现在 start 之 前 ， 不 复制 任何 元 素 到 新 数组 中 ， 比 如 a.slice(4,3) 。 示 例 中 
store.modified.slice(0) 的 作用 就 是 复制 store.modaifieda, 保证 store .modified 中 的 原始 
数据 不 受 影响 。 

下 面 把 这 些 数据 组 装 成 简单 的 数组 ， 因 为 数组 m 里 保存 的 都 是 Record， 而 不 是 简单 对 象 ， 只 
需要 取出 Record 的 data 属 性 即 可 。 虽然 使 用 普通 循环 也 能 实现 , 但 是 这 里 我 们 还 是 讲解 一 下 EXT 
提供 的 each () 函数 。 

Ext .each (array, fn) 的 作用 是 遍历 array， 并 对 每 项 分 别 调用 fn 函数 。 如 果 array 不 是 数 
组 ， 则 只 执行 一 次 。 如 果 某 项 调用 fn 后 结果 返回 false (必须 是 false，undefined 无 效 )， 那 么 
遍历 将 结束 并 退出 ， 后 面 的 array 项 将 不 会 被 遍历 。 遍 历 过 程 中 ， 每 次 为 En 传 入 的 参数 分 别 为 当 
前 遍历 的 数组 元 素 ， 当 前 元 素 索引 和 包含 原 数组 所 有 数据 的 array 变 量 。 

提交 数据 的 代码 部 分 比较 简单 ， 我 们 为 Ajax 设置 匹配 的 methoa 和 ur1l， 以 及 处 理 成 功 和 失败 
事件 的 回调 函数 ， 再 将 EditorGrid 中 的 数据 组 装 成 JSON 形 式 的 字符 串 ， 然 后 提交 给 后 台 。 最 后 ， 
在 Ajax 调 用 成 功 之 后 执行 store .reload()， 刷新 表格 中 的 数据 。 

另外 ， 介 绍 一 下 store 的 参数 pruneModifiedRecords。 如 果 把 它 设置 为 Lrue， 每 次 进行 
remove 或 10ad 操 作 时 store 会 自动 清除 modifiead 标 记 ， 可 以 避免 出 现下 次 提交 时 还 会 把 上 次 那 
些 modified 信 息 都 带 上 的 现象 。 

完整 代码 如 下 所 示 : 


Var cm = new Ext .grid.ColumnModel (It{ 
header: ' 编 号 '， 
GataIndex: 'id', 
editor: new Ext .grid,GridEditor'! 
new Ext.form.TextFieldl(t{ 
allowBlank: false 
}) 
} 
hy: 过 
header: ' 名 称 '， 
dataIndex: 'name', 
editor: new Ext.grid.GridEditor! 
new Ext.form,.TextField({t{ 
allowBlank: false 
}) 
} 
)， 1{ 
header: ' 描 述 '， 
dataIndex: '‘'descn', 
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editor: new Ext.grid,.GridEditor! 
new Ext.form.TextFieldl(t 
allowBlank: false 
}) 
} 
jks 


var data = [ 
('1', 'namel', ‘descni'], 
Evo”. "na paernd |), 
[('3', 'name3', 'descn3'], 
[(':4':,'named4!', ‘descn4']; 
[('5','nameSs', 'descnSs']) 





区 


Var store = new Ext.data.Store'l(l{ 
proxy: new EXt .Qata.MemoryProxy (data), 
reader: new Ext .data.ArrayReader ({}, | 
{name: 'id'}, 
{name: ‘name'}, 
‘name: 'descn'} 
] ) ， 
pruneModifiedRecords: true 
Fis 


Var Record = Ext.data.Record.createll[ 
{name: ‘id’', type: ‘'string'}, 
{name: ‘'name', type: 'string'}, 
{name: ‘'descn', type: 'string'} 

]): 

store.load!(); 


Var grid = new Ext .grid.EditorGridpane}l ({ 
autoHeight: true, 
renderTo: ‘grid', 
store: store, 
cm: cm, 
thar: new Ext.Toolbar{[('-', { 
text : ' 添 加 一 行 '， 


handler: function()})t{ 
Var initValue = {id:'',name:'',descn:''}; 
Var p = new RecordlinitValue); 


grid.stopEditingt{); 
store.insert (0, p); 
grid.startEditing{0, 0); 


Pp-.dirty = true; 

p.modified = initVvalue; 

if (store.modified.indexOf (p) == -1)1{ 
store.modified.push(p); 

} 
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站 
text : “删除 一 行 ' ， 
handler: function()})t{ 
Ext .Msg .confirm(' 信 息 '，' 确 定 要 删除 ? '， function(btn) 1 
if {btn == 'yes') 1 
var sm = grid.getSelectionModel {()}); 
var cell = sm.getSelectedCell(}; 


var record = store.getAt (cell{l0]); 
store,remove(record); 


FE 


text: ' 保 存 '， 
handler: function(})t{ 
var m = store.modified.slice({(0); 
Var jsonArray = []; 
Ext .each(m, function(item) { 
jsonArray .pushlitem.data):; 


Ext .Lib.A]jax.redquest 
ROSE 
SNELL 
{success: functionl(response){ 
Ext .Msg .alert (' 信 息 '， response.responseText, function(){ 
store,.reload{(}); 
}.3 
},failure: function()t 


Ext .Msg ,alert ("错误 "，* 与 后 台 联 系 的 时 候 出 现 了 问题 " ) ; 
3 
"data=' + encodeURIComponent (Ext .encode(jsonarray) ) 


Ey 
该 示例 在 03.grid/11-03-01.html 中 。 


3.11.4 验证 EditGrid 中 的 数据 


不 知道 大 家 有 没有 注意 到 ， 这 里 设置 的 allowBlank:false 限 制 只 能 修改 已 有 数据 的 单元 
格 。 如 果 新 建 了 一 行 ， 里 面 的 空白 是 无 法 检测 到 的 。 客 户 没有 修改 这 些 空白 ， 但 仍然 可 以 直接 提 
交 数 据 ， 这 样 把 无 效 数据 提交 到 后 台 显 然 是 不 可 取 的 。 

很 可 惜 的 是 ， 默 认 情 况 下 ，EditorGrid 并 没有 实现 这 部 分 功能 ， 需 要 我 们 自己 在 提交 前 进行 
判断 ， 实 现 方法 如 代码 清单 3-7 所 示 。 


代码 清单 3-7 数据 校 验 


for (var i = 0; i < m.length; i++) { 
Var record = m[i]; 
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Var fields = record.fields.keys; 
for (var jj = 0; j < fields.length; j++) { 
var name = fields [1]; 
Var value = record.datalnamel]; 
var colIndex = cm.findColumnIindex (name); 
Var rowlindex = store.indexOfIdl(record.id); 
var editor = cm.getCellEditor(colIndex) .field; 


if (!editor.validateValue(value)) ({ 
Ext .Msg.-alert(' 提 示 '， ' 请 确保 输入 的 数据 正确 。' ，function{) lt 
grid.startEditing (rowIndex, colIindex); 
和 了 
return; 





} 


下 面 将 示例 代码 中 的 重点 部 分 讲解 一 下 。 

首先 ， 循 环 数 组 m， 获 得 被 修改 的 每 行 。var record = m[i] ;代表 某 一 行 ，var fields 
=record.fields. keys; 表 示 - -共有 多 少 列 。 

其 次 ， 循 环 列 fields， 获 得 当前 行 的 每 一 个 单元 格 。 代 码 中 获得 的 变量 值 有 name〈 列 名 )、 
value〔 单 元 格 的 数值 )、colIndex( 列 号 )、rowIndex〔 行 号 )， 以 及 editor (colIndex 列 使 
用 的 编辑 器 )。 

最 后 ， 进 行 数据 校 验 。 直 接 调用 editor .isvalia() 方 法 总 会 出 现 el 不 存在 的 错误 ， 所 以 只 
能 使 用 editor .validateValue (value) 的 方式 进行 校 验 ， 这 是 isvalia() 内 部 的 实现 方法 。 

如 果 校 验 成 功 ， 则 进入 下 一 个 单元 格 ， 重 复 上 述 步 骤 。 如 果 校 验 失败 ， 弹 出 提示 对 话 框 ， 并 
激活 那个 单元 格 的 编辑 状态 。 

经 过 总 结 发 现 ， 这 里 的 难点 是 如 何 确定 某 个 单元 格 的 数据 和 对 应 的 编辑 器 ， 其 实 store 和 
colModel 之 间 是 相互 关联 的 ， 只 要 认真 查阅 一 下 API， 一 切 问 题 都 会 迎刃而解 。 

完整 代码 如 下 所 示 : 


Var cm = new Ext .grid.ColumnModel([i 
header: ' 编 号 '， 
dataIndex: ‘id', 
editor: new Ext .grid.,GridEditort' 
new Ext.form.TextField!l(t 
allowBlank: false 
}) 
) 
ys 
header: ' 名 称 '， 
dataIndex: ‘name', 
editor: new Ext .grid.GridEditor! 
new Ext.form,.TextField(t 
allowBlank: false 
}) 
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| 
header: ' 描 述 '， 
dataIindex: 'descn', 
editor: new Ext .grid.GridEditor!( 
new Ext.form.TextField{l 
allowBlank: false 
}) 
) 
}]3s 


Var data = [ 
['1', 'namel', 'descnl'], 
[2 7 :Tame "dscn2,); 
[a me Hasery]j:, 
['4','name4','descn4'], 
['S5', ‘nameSs', 'descn5'] 
] ; 


var Store = new Ext.data.Store(t 
proxy: new Ext.data.MemoryProxy (data), 
reader: new Ext.dGata.ArrayReader({}, [ 
iname: 'id'}, 
‘name: "nanme' )， 
‘name: 'descn')} 
1 
到 


var Record = Ext .data.RecordG.createl([ 
{name:; 'id', type: 'string'}, 
{fname: ‘name', type: '‘'string'}, 
{name: 'descn', type: '‘'string')} 

] 本 过 

store.lioad(); 


var grid = new Ext .grid.EditorGridPanell({ 
autoHeight: true, 
rendGerTo: ‘grid', 
store: store, 


cm: cm, 
tbar: new Ext.Toolbar(['-', { 
text: ' 添 加 一 行 '， 


handler: function()}t{ 
Var initValue = {id:'',name:'',descn:''}; 
Var Pp = new Record{initValue) ; 
grid.stopEditing(); 
store.insert (0, p); 
grid.startEditing(0, 0); 
p.dirty = true; 


p.modified = initValue; 
if{store.modified.indexOof{p) == -1)}){ 
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store.modified.pushi{p); 


text : ‘删除 一 行 '， 
handler: function()t{ 
Bxt .Msg .confirm(' 信 息 '，' 确 定 要 删除 ? '， function (btn){ 
LE EN or VOB (fF 
var sm = grid,.getSelectionModel (); 
var cell = sm.getSelectedCell(); 





Var record = store.getAt {cell[0!1); 
store.remove{record); 


了 这 


text: :保存 ，， 
handler: functrion!(})t{ 
var m = Store.modified.slice(0); 
for (var i = 0; i < m,.length; i++) { 
Var recordG = ml[il,; 
var fields = record,.fields.keys; 


for (var ] 0; jj < fields.length; j++) { 
var name = fields[j]; 
var value = record.datalname]; 


var colIndex = cm.findColumnIndex (name) : 
var rowIndex = store.indexofId(record.id); 
Var editor = cm.getCellEditor{colIindex) .field; 


if (!‘'editor.validateValue(value)) { 
Ext .Msg .alert ('! 提 示 '，' 请 确保 输入 的 数据 正确 。'， functiont{)t{ 


grid.startEditing (rowIndex, colIindex); 
二 


return; 
} 
} 
} 
// 进行 到 这 里 ， 说 明 数 据 都 是 有 效 的 
Var jsonArray = []; 


Ext .each(m, function(titem) { 
jsonaArray .push (item.data); 
i 


Ext .liDb.Ajax.regquest( 
"ST, 
'grid2.isp', 
{success: function(response}t 
Ext .Msg .alert (' 信 息 '， response.responseText, function(){ 
store.reload{(); 
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} 3 

},failjure: function()t{ 
Exz.Msg.alert{" 错 误 "，“ 与 后 台 联 系 的 时 候 出 现 了 问题 " ) ; 

} 寺 ， 

'Gata=' + encodeURIComponent (Ext .encode (jsonArray)) 

}; 
} 
车 
了 


该 示例 在 03.grid/11-04-01.html 中 。 
3.11.5 ”限制 输入 数据 的 类 型 


任何 软件 或 系统 都 会 对 输入 的 数据 有 所 限制 ， 比 如 年 龄 ， 必 须 是 数字 类 型 的 。 可 以 通过 输入 
方式 直接 对 输入 的 数据 类 型 进行 限制 ， 从 而 保证 客户 不 会 输入 完全 错误 的 数据 ， 而 且 这 样 做 比较 
简单 直观 。 

EXT 提 供 了 多 种 数据 类 型 的 组 件 ， 比 如 NumberFie1ld 限 制 只 能 输入 数字 、comboBox 限 制 只 
能 输入 备 选项 、DateField 是 选择 日 期 、checkbox 则 是 从 true 和 false 中 选择 其 一 ， 等 等 。 

我 们 现在 来 修改 之 前 的 数据 模型 ， 让 数据 类 型 变 得 更 丰富 ， 如 下 面 的 代码 所 示 。 

人 0 


Var data = 
人 Date(l),true}), 
[2.2,2,new Datel),falsel], 
[3.3,0,new Date{),true], 
[4.4,1L,new Date!{},false!l, 
[5.5,2,new Date(),true] 


J; s 
第 1 列 是 数字 ， 第 2 列 是 ComboBox 对 应 的 ida， 第 3 列 是 日 期 ， 第 4 列 是 布尔 型 
现在 分 别 对 这 5 列 设置 各 自 的 编辑 器 , 第 1 列 限制 只 能 用 数字 , 不 能 是 负数 ， 而 且 不 能 超过 10， 
如 下 面 的 代码 所 示 。 
Var cm = new Ext .grid.ColumnModeltl[t 
header : ' 数 字 列 '， 
dataInaex: 'number', 
editor:new Ext .grid.GridEditor (new Ext.form,.NumberFieldlt 
allowBlank: false, 
allowNegative: false, 


maxValue: 10 
}})) 


使 用 NumberField 就 表示 只 能 输入 数字 ，allowBlank:false 表 示 不 能 为 空 ，allow- 
Negat ive:false 表 示 不 能 输入 减 号 ，maxvalue:10 表 示 可 输入 的 最 大 值 ， 运 行 结果 如 图 3-32 所 
示 。 
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数字 列 选 保 列 日 期 列 判断 列 


1 省 ext 在 线 支 者 2008-04-25 号 
2.2 BX 术 后 2008-04-25 否 
3.3 新 般 68 半 教程 2008-04-25 是 
44 ext 在 号 支 博 2008-04-25 否 
5.5 ext 扩 反 2008-04-25 是 





图 3-32 ”限制 输入 数据 类 型 
第 2 列 稍微 复杂 一 些 ， 由 于 是 ComboBox， 所 以 我 们 得 先 准备 下 拉 列 表 里 的 数据 ， 如 下 所 示 。 


var comboData = [ 


['0',' 新 版 ext 教 程 '}， 
['1i','ext 在 线 支持 ';， 
['2','ext 扩 展 '] 


La 
数据 部 分 单独 抽 离 出 来 是 为 了 在 editor 和 renderer 里 保持 数据 同步 ， 配 置 的 参数 都 已 经 在 
前 面 与 ComboBox 相 关 的 内 容 中 介绍 过 。 

ComboBox 的 配置 如 代码 清单 3-8 所 示 。 


代码 清单 3-8” 配 置 ComboBox 


{ 
header : ' 选 择 列 ' ， 
GataIndex: 'combo', 
editor:new Ext .grid.GridEditort{ 
new Ext.form.ComboBox!t 
store:; new Ex .data.SimpleStorel(t 
fields: ['value', 'text'], 
data: comboData 
}) ， 
emptyText : “请 选择 ' ， 
mode: ‘'local', 
triggerAction: ‘all', 
valueField: 'value'， 
displayField: ‘text', 
readOonly:true 
ys 
renderer: function(value}t{ 
return comboData[lvalue] [1]; 
} 
} 


大 家 仔细 研究 一 下 泻 染 函数 renderer， 经 常 有 人 会 遇 到 EditorGrid 里 的 ComboBox 总 是 无 法 
正常 显示 数据 的 情况 。 其 实 ， 就 是 因为 少 了 这 个 renderer 函 数 。 当 没 写 这 个 函数 时 ， 显 示 的 数 
据 是 value 值 ， 而 不 是 text 。 毕 况 EditorGrid 里 的 编辑 器 只 在 实际 编辑 时 起 作用 ， 表 格 与 editor 之 
间 共 享 的 是 数据 ， 显 示 层 都 要 依靠 各 自 的 实现 。 不 过 这 样 做 更 灵活 ， 不 需要 两 者 都 使 用 一 样 的 显 
示 方式 ， 如 图 3-33 所 示 。 
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数字 列 选 灰 列 日 期 列 判断 列 
| (让 法 云 片 生 有 4 2008-04-25 及 
22 新 版 ext 教 程 2008-04-25 大 
33 ext 在 线 支 持 2008-04-25 是 
44 ext 扩 展 2008-04-25 3 
55 8 闪 忻 夺 2008-04-25 是 


图 3-33 ComboBox 


第 3 列 是 选择 日 期 ， 这 也 将 是 大 家 常用 到 的 控件 ， 具 体 代 码 如 下 所 示 。 


{ 
header: ' 日 期 列 ' ， 
dataIndex: 'date', 
editor:new Ext.grid.GridgEditor (new Ext.form.DateField(t 
format: 'Y-m-d', 
minValue: '2007-12-14', 
disabledDays: {0, 6], 
disabledDaysText: ' 只 能 选择 工作 日 ， 
生计 
renderer: function{value}) { 
return value.format("Y-m-d"); 
} 
} 


比较 常用 的 有 format :'Y-m-d'， 这 样 显 示 的 日 期 会 变 成 “年 -月 -日 ”的 格式 ，minvalue 
设置 日 期 最 小 值 ，disabledDays 是 很 有 趣 的 一 个 选项 ， 你 可 以 通过 它 禁 止 用 户 选 择 星期 几 ， 我 们 





11 Bt 在 二 支持 2008-04-25 39 品 
2 extt 政 
33 秘 后 ext 教 要 EE 3 
#4 ext 在 线 灾 博 1 2 3 4 | 
55 ext 术 质 7 8 9 10 1 
| 14 15 16 17 18 
| 21 22 23 24 
| 26 29 30 


图 3-34 DaterField 


第 4 列 中 的 checkbox 就 只 能 选择 true 或 false， 所 以 也 没有 什么 需要 配置 的 ， 如 下 面 的 代码 
所 示 。 
{ 
header: ' 判断 列 '， 
dataIndex: ‘check', 


editor:new Ext.grid.GridEditor (new Ext.form,Checkbox({ 
allowBlank: false 


Download at Pin5i.Com 


http://52pdf.taobao.com 


3.11 可 编辑 表格 控件 一 一 EditorGrid 下 





}))， 
renderer:function{value) ({ 
return value ? ' 是 ' ; ' 否 '; 
} 
yy 


尽管 不 是 必须 的 ， 我 们 还 是 用 renderer 对 显示 进行 了 美化 ， 如 图 3-35 所 示 。 








; 数字 列 选任 列 日 期 列 基 断 列 
1 ext 在 线 支 伟 。 “2008-04-25 SE 
| 22 ext 术 质 2006-04-25 香 
让 六 新 版 ext 朱 要 2008-04-25 是 
44 e 闪 在 线 支 博 2008-04-25 天 
.55 ext# 反 2008-04-25 是 


图 3-35 CheckBox 


完整 代码 如 下 所 示 : 


Var comboData = [ 
L'0',' 新 版 ext 教程 ' ] ， 
['1','ext 在 线 支持 ']， 
['2','ext 扩 展 ' ] 


var cm = new Ex .grid.ColumnModel([t 

header : ' 数 字 列 '， 

dataIndex: ‘number', 

editor:new Ext .grid.GridEditor (new Ext.form.NumberField!(t{ 
allowBlank: false, 
allowNegative: false, 
maxValue: 10 

})) 


header : ' 选 择 列 ' ， 
dataIndex: 'combo', 
editor:new Ext.grid.GridEditor (new Ext.form.ComboBoxt{! 
store: new Ext.data.Simplestore l(t 
fields:['value’', 'text'], 
data: comboData 
}) ， 
emptyText : ' 请 选择 '， 
mode: '‘'local', 
triggerAction: 'all', 
valueField: ‘value', 
displayField: ‘text', 
readonly:true 
]) 
renderer: function{value)t 
return comboDatalvalue] [1}; 
} 
Pai:t 
header: ' 日 期 列 ' ， 
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dataIndex: 'date', 

editor:new Ext .grid.GridEditor (new Ext.form.DateField!(t 
format: 'Y-m-d', 
minValue: '2007-12-14', 
disabledDays: [0, 6], 
disabledDaysText : ' 只 能 选择 工作 日 ， 

}) ) ， 

renderer: functionl(lvalue) { 
return value.format(*"*Y-m-d"); 

} 

kvt 

header : ' 判 断 列 '， 

dataIndex:'check', 

editor:new Ext.grid.GridEditor (new Ext.form.Checkbox(t{ 
allowBlank: false 

})), 

renderer:function(value) 1 
return Value ? ! 是 ' ; ' 否 '; 

} 

六 加 褒 


1/ 放 到 grid 里 显示 的 原始 数据 

var data = [ 
[1.1,1,new Date{),true], 
[2.2,2,new Date(),false], 
(3.3,0,new Date(),true], 
[4.4,1,new Date(),falsel] ， 
[5.5,2,new Date(),true] 


Var store = new Ext.data.Store({t 
proxy: new Ext ,data.MemoryProxy (data), 
reader: new Ext.data.ArrayReader ({}, | 
{name: 'number'}, 
{name: 'combo'}, 
{name: 'date'}, 
{name: 'check')} 
] ) 
})，; 
store.load!(}); 


var grid = new Ext.grid.EditorGridPpanel({ 
autoHeight: true, 
renderTos 'grid®’, 
store: store, 
cm: cm 


区 
该 示例 在 03.grid/11-05-01.html 中 。 


3.12 属性 表格 控件 一 一 PropertyGrid 
PropertyGrid 是 在 EditorGrid 的 基础 上 开发 的 更 智能 易 用 的 高 级 表格 组 件 。 下 面 将 介绍 
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PropertyGrid 的 功能 和 应 用 方式 。 
3.12.1 PropertyGrid 
先 来 看 看 图 3-36。 
-机 利 表格 一 ei 
Name > Value 
创建 时 间 12715/2007 
名 六 不 告诉 你 
痪 述 嘿 。 车 计 疫 堵 可 说 的 
是 否 有 效 true 
版 本 号 0.01 


图 3-36 ”属性 表格 


Property Grid (属性 表格 ) 扩展 自 EditorGridPanel， 所 以 可 以 直接 编辑 右边 的 内 容 。 注 意 ， 只 
有 右边 的 ， 即 使 你 单 击 左边 的 单元 格 ， 编 辑 器 也 只 会 出 现在 右边 。 

实际 上 ， 我 们 可 以 用 散 列 表 来 形容 PropertyGrid， 左 边 可 以 看 作 key， 右 边 的 是 value。key 
是 由 我 们 指定 好 的 ， 用 户 只 需要 修改 对 应 的 value 即 可 。 对 某 些 属性 而 言 ， 配 置 很 方便 。 

代码 方面 ， 因 为 只 有 两 列 ， 所 以 我 们 不 用 担心 columnModael，ds 的 部 分 确定 是 key 和 


value 的 组 合 ， 因 此 也 不 用 再 分 几 步 准备 。 下 面 我 们 来 创建 一 个 PropertyGrid， 如 代码 清单 3-9 
所 示 。 


代码 清单 3-9 ”创建 PropertyGrid 


var grid = new Ext .grid.PropertyGridl(t{ 
title: ' 属 性 表格 '， 
autoHeight : true, 
width: 300, 
renderTo: ‘grid', 


"名 字 " : "不 告诉 你 "， 
"创建 时 间 ": new Date{Dbate.parse('12/15/2007'))， 
"是 否 有 效 " : false， 
py wi 
"描述 * : " 咽 ， 估 计 没 啥 可 说 的 ， 
Ey 


title 就 是 整个 表格 的 标题 ; autoHeight 很 有 用 ， 这 样 就 不 需要 我 们 为 aiv 指 定 style; 
width 是 需要 的 宽度 ; renderTo 应 该 很 眼熟 ， 它 指定 这 染 的 元 素 ida。 剩 下 的 就 是 source， 这 个 
JSON 数 据 里 指定 了 一 组 kev 和 value， 最 后 它们 都 会 显示 到 表格 里 。 

PropertyGrid 提 供 的 功能 还 不 只 这 些 , 试 着 单 击 一 下 单元 格 ， 你 会 发 现 string、date、bool 
和 number 对 应 着 默认 的 编辑 器 ， 分 别 是 TextField、DateField、 ComboBox 和 NumberField,， 
bool 对 应 的 ComboBox 里 只 有 true 和 false 两 项 。 
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该 示例 在 03.grid/12-01-01.html 中 。 


3.12.2 ”只 能 看 不 能 动 的 PropertyGrid 


PropertyGrid 默 认 提供 编辑 功能 ， 但 是 在 某 些 情况 下 ， 只 用 它 来 显示 数据 ， 这 时 就 需要 禁用 
PropertyGrid 中 的 编辑 功能 。PropertyGrid 中 并 没有 直接 提供 可 以 开关 编辑 功能 的 参数 ， 但 我 们 可 
以 通过 EXT 的 事件 监听 器 实现 这 一 功能 ， 代 码 如 下 。 


grid.on("beforeedit", function(e})t{ 
e.cancel = true,; 
return false; 

FY 


该 示例 在 03.grid/12-02-01.html 中 。 


3.12.3 ”强制 对 name 列 排序 


看 到 name 列 上 的 排序 第 头 ，PropertyGrid 对 source 中 的 第 一 列 自动 使 用 升序 排列 ， 这 就 造成 
了 最 终 的 显示 顺序 很 可 能 与 我 们 输入 的 顺序 不 同 。 

有 很 多 人 以 为 在 EXT 健 壮 的 控件 库 内 部 肯定 有 一 个 选项 用 来 控制 排序 , 其 实 它 的 排序 方法 是 
写 死 在 代码 里 的 ， 而 且 没 有 参数 可 以 控制 。 如 果 想 修改 排序 方式 ， 就 只 能 修改 源码 ， 如 代码 清单 
3-10 所 示 。 


代码 清单 3-10 ”修改 默认 排序 


Ext ,grid.PropertyGrid.prototype.initComponent = function()t 
this.customEditors = this.customEditors || {}; 
this.lastEditRow = null; 
var store = new Ext .grid.PropertySsStore(this); 
this.propStore = store; 

Var cm = new Ext .grid.PropertyColumnModel (this, store); 
// Store.store.sort{'name’', ‘'ASC'); 
this.addEvents!( 
'beforepropertychange', 
‘propertychange' 
); 
this.cm = cm; 
this.ds = store.store; 
Ext .grid.PropertyGrid.superclass.initComponent .call (this); 


this.selModel.on('beforecellselect', function{sm, rowIndex, colInGex){ 
if (colIindex === 0){ 
this.startEditing.defer(200, this, [rowIndex, 1})); 
return false; 
} 
},. FHISg)s 
}3 


写 了 这 么 多 代码 ， 结 果 只 是 为 了 注释 掉 其 中 的 store.store.sort('name'，'ASC');, 让 
它 不 再 对 name 进 行 升序 排序 。 
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该 示例 在 03.grid/12-03-01.html 中 。 


3.12.4 根据 name 获得 value 


PropertyGrid 既 然 已 经 是 一 个 散 列表 的 形式 ， 自 然 会 想到 直接 通过 name 获 得 value。 可 惜 
PropertyGrid 没 有 直接 提供 这 个 功能 ， 需 要 我 们 自己 去 store 里 找 ， 如 下 面 的 代码 所 示 。 

grid.store.getByIdt{' 名 字 ')} .get {'value'); 

先 获得 id 为 “名 字 ” 的 那 一 行 ， 然 后 获得 value 列 的 值 。 如 果 能 提供 一 个 快捷 的 函数 ， 那 就 


更 好 。 
该 示例 在 03.grid/12-04-01.html 中 。 


3.12.5 ” 自 定义 编辑 器 


默认 的 TextField、DateField、ComboBox 和 NumberField 也 就 只 能 处 理 一 般 的 情况 。 当 我 们 想 
对 编辑 器 进行 更 详细 的 配置 时 ， 就 需要 用 到 PropertyGrid 的 customEdaitors， 为 指定 ia 的 那 行 数 
据 设 置 对 应 的 编辑 器 。 让 我 们 按照 API 里 的 示例 来 制作 一 个 TimeFieldnm 。 


var grid = new Ext .grid.PropertyGridl(t 
title: “属性 表格 ' ， 
autoHeight: true, 
width: 300, 
renderTo: ‘grid', 
customEditors: { 
'Start Time' :new Ext .grid,GridEditor {new 
Ext .form.TimeField({selectOnFocus:true})}) ee 
}, 其 性 去 神 
source: { 
‘Start Time': '10:00 AM 


4 
: 


} 


}); ge 
“customEditors 和 source 的 设置 基本 一 样 ， 只 需要 将 两 者 的 属 Sita 
性 名 称 对 应 起 来 ， 并 且 为 customEditors 里 的 所 有 属性 指定 一 个 二 
editor。 这 样 我 们 就 获得 了 自制 的 编辑 器 ， 与 默认 编辑 器 的 功能 一 ee 
样 ， 如 图 3-37 所 示 。 
这 样 我 们 就 获得 对 编辑 器 的 完全 控制 权限 ， 可 以 使 用 我 们 自己 sere 
需要 的 组 件 。 | 
该 示例 在 03.grid/12-05-01.html 中 。 图 3-37 TimeField 


3.13 ”分 组 表格 控件 一 一 Group 


Ext.grid.GroupingGrid 分 组 表格 就 是 在 普通 表格 的 基础 上 ， 根 据 某 一 列 的 数据 将 表格 中 的 数 
据 分 组 显示 的 表格 控件 。 
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3.13.1 分 组 表格 简介 
像 图 3-38 这 样 带 有 分 组 功能 的 表格 还 是 很 有 用 处 的 。 


编号 < 医 别 名 称 的 述 
加 性 别 : female 
此 female naime2 descn2 
4 female natmed descn4 
对 托 别 :male 
1 rmale namef descnfl 
3 male narme3 descn3 
5 male names descns 
图 3-38 ”分 组 表格 
首先 定义 一 组 数据 ， 如 下 面 的 代码 所 示 : 


Var data = { 

['1','male', 'namel', 'Gescni'), 
2','female', 'name2','descn2'), 
3','male', ‘name3','descn3'), 
4','female', 'name4','descn4'], 
5','male', 'name5', 'descn5'] 


rr en er 
入 四 上 


] 


这 些 数据 将 根据 第 2 列 “ 性 别 ” 来 进行 分 组 ， 然 后 还 要 根据 ia 进行 升序 排列 ， 通 过 
Ext .data.GroupingStore 实 现 分 组 效果 ， 最 后 提供 给 GridqPane1l， 如 下 面 代码 所 示 。 
var store = new Ext,data.GroupingsStorelt 
reader: reader, 
data: data, 
groupField: 'sex', 


sortIinfo: {field: ‘id', direction: "ASC"} 
Fy 


这 里 的 reader 和 data 还 是 和 的 原来 的 示例 一 样 , 需要 关注 的 是 groupFie1la, 它 确定 通过 哪 
一 项 分 组 。 令 人 困惑 的 是 ， GroupingStore 要 求 必须 设置 sortInfo。 这 个 参数 对 应 的 值 里 有 两 
项 ，field 是 排序 的 属性 ，adirection 是 排序 的 方式 。 我 们 把 数据 传 入 ， 输 出 显示 的 就 是 分 成 一 
组 一 组 的 数据 。 但 是 ， 如 果 想 显示 成 我 们 期 望 的 那 种 形式 ， 还 需要 设置 Groupingview， 如 下 面 
的 代码 所 示 。 

Var grid = new Ext.grid.GridPaneli{t 

store: store, 
coliumns:; columns, 
View: new Ext .grid,.GroupingViewt{}, 


renderTo: 'grid' 
其 用 


该 示例 在 03.grid/13-01.html 中 。 
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此 外 ， 还 有 GroupingSummaryjs 和 RowExpand.js， 不 过 这 些 不 在 ext-alljjs 中 ， 用 到 时 需要 另外 
导入 。 


3.13.2 分 组 表格 视图 Ext .grid.GroupingView 


Ext .grid.GroupingView 继 承 自 Ext .grid.GridView， 它 是 分 组 表格 的 显示 视图 ， 实 际 应 
用 中 需要 与 Ext .data.GroupingStore 配 合 使 用 。 为 了 在 Ext .grid.GridPanel 中 使 用 Ext. 
grid.GroupingView， 我 们 要 在 创建 Ext .grid.cridpPanel 时 传 入 一 个 Ext .grid.GroupingView 
的 实例 ， 如 下 面 的 代码 所 示 。 


var grid = new Ext.grid.GridPanel (tf 
store: new Ext.Gata.Groupingstorel(t 
reader: new Ext.data.ArrayReader{({}, meta}, 
Gata: data, 
groupField: '‘'sex', 
sortinfo: (field: id'; directions: “ASC"*} 
Fd 
columns: meta, 
View: new Ext ,grid.GroupingView!), 
renderTo: ‘grid', 
autoHeight: true 
}); 


其 中 view: new Ext .grid.GroupingView() 是 在 Ext .grid.GridPanel 中 使 用 分 组 视图 的 
必要 条 件 。 在 之 后 的 代码 中 我 们 会 使 用 gria.getView() 获 得 Ext .griq.GroupingView 的 实例 ， 
可 以 在 它 的 实例 上 调用 功能 函数 ,对 表格 的 视图 部 分 进行 操作 。 比 较 常 用 的 操作 是 展开 或 折 肥 分 
组 ， 如 下 面 的 代码 所 示 。 


Ext .get ('expand') .on('click', function() { 
grid.getView{() .expandAllGroups(}; 

】 33 

Ext .get {'colilapse') .on('click', function{) { 
grid.getView() .collapseAllGroups(); 

})» 

Ext .get ('toggle') .on{'click’:, function() { 
grid.getView() .toggleAllGroups{); 

BE 


我 们 在 3 个 按钮 上 添加 了 监听 事件 ， 在 单 击 不 同 按钮 时 对 分 组 视图 进行 展开 或 折 登 操作 。 上 
例 中 ， expandqaallGroups() 展开 所 有 分 组 ，collapseAllGroups{) 折 肥 所 有 分 组 ， 
toggleAllGroups{) 会 自动 判断 分 组 的 状态 ， 当 分 组 都 已 折 释 时 会 展开 所 有 分 组 ， 当 分 组 都 已 
展开 时 会 折 有 所 有 分 组 。 

也 可 以 对 某 一 分 组 执行 展开 或 折合 操作 ， 如 下 面 的 代码 所 示 。 


Ext .get ('one') .on{'click', function() ({ 
var View = grid,.getView!(); 
var groupId = view.getGroupId!('female':); 
view.toggleGroup{groupId); 
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上 例 中 ， 首 先 获得 Ext .grid.GroupingView 的 实例 ， 然 后 调用 getGroupIda() 函数 获得 对 
应 分 组 的 ia。 因 为 之 前 是 根据 性 别 进行 分 组 的 , 所 以 getGroupId('female') 得 到 的 就 是 女性 对 
应 的 分 组 ， 在 获得 groupId 之 后 就 可 以 调用 toggleGroup () 函数 对 这 个 分 组 执行 展开 或 折 和 又 操作 
了 ， 结 果 如 图 3-39 所 示 。 

i | collapse 了 toggle | (Fogele me] 
编导 ^ 蕉 唱 考 称 棉 达 


村 性别 : Femaje 


导 性 测 : mmale 

1 mAals ramel descn] 
3 male nams3 descn3 
5 male Names descns 


图 3-39 通过 Ext .grid.GroupingView 实 现 分 组 的 展开 和 折 吉 功 能 
完整 代码 如 下 所 示 : 


Ext .onReady {function{}f{ 
EX ,QuickTips,init() ， 


Var meta = [ 
{header:' 编 号 ' ,dataIndex:'id',， name:'id'},， 
{header: ' 性 别 ', dataIndex:'sex', name:'sex'}, 
{header:' 名 称 ', dataIndex: 'name', name: 'name'}, 
{header: ' 描 述 ' ,dataIndGex:'descn'， name: 'descn'} 


Var data = | 
['1','male', 'namel', descnl:']， 
{'2','female', 'name2','descn2'], 
[('3','male’', ‘name3', 'descn3'], 
['4','female', 'name4', 'descn4' |), 
['5', 'male', 'name5', 'descn5'] 


var grid = new Ext .grid.GridPpanelt{t{ 
store: new Ext.data.GroupingStorel{t{ 
reader: new Ext.data.ArrayReader ({}, meta), 
data: data, 
groupField: '‘'sex', 
sortinfo:; {field: ‘id', direction: "RSC" ) 
Ys 
columns: meta, 
View: new Ext.grid.GroupingView!()}, 
renderTo: ‘'griad', 
autoHeight: true 
i 


Ext .Set('expand') .on{'click', function({} { 
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grid.getView() .expandAllGroups(}; 


Ext .get{'collapse') .on('click', function{}) { 
grid.getView() .collapseAllGroups{(}; 


Ext .get ('toggle') .on{'click', function() { 
grid.getView{() .toggleAllGroups (}); 


Ext .get{('one’).on('click', function() { 
Var View = grid.getView!(}); 
Var 9roupIG = view.getGroupld!('female'); 
view.toggleGroup (GroupIG) ; 





1) 


该 示例 在 03.grid/13-02.html 中 。 


3.14 ”可 拖 放 的 表格 


本 节 介绍 表格 中 的 拖 电 功能 ,包括 拖 昌 改变 表格 大 小 。 拖 动 表格 中 的 某 一 行进 行 排序 ， 将 某 
一 行 由 一 个 表格 中 拖 到 另 一 个 表格 中 ， 最 后 还 演示 了 如 何在 表格 和 树 形 之 间 进 行 拖 电 。 


3.14.1 拖 放 改变 表格 的 大 小 


注意 图 3-40 下 面 蓝 色 的 细 条 ， 把 鼠标 放 到 上 面 ， 就 可 以 任意 改变 表格 的 高 度 。 实 现 这 种 效果 
并 不 难 ， 也 不 需要 对 写 好 的 表格 做 大 的 修改 ， 如 下 面 代码 所 示 。 


Var rz = new Ext .Resizable('grid', { 
wrap:true, 
minHeight :100, 
pinned:true, 
handles: 's' 
}1); 
rz.on('resize', grid.syncSize, grid); 





1 name1 descni 

2 name2 descn2 : 
3 name3 descn3 
4 named Uescnd | 
5 | 


names .descns 


图 3-40” 拖 放 改 变 表格 大 小 


Resizable 必 须 放 在 render 之 后 ， 否 则 就 会 出 现 问题 。 下 面 我 们 来 看 看 参数 的 构成 。 

0 第 一 个 参数 是 'gria'， 就 是 说 这 个 可 改变 大 小 的 区 域 是 在 div id="gria" 这 个 元 素 上 起 
作用 。 

wrap:true， 这 个 参数 会 在 构造 Resizable 时 自动 在 指定 ia 的 外 边 包 圳 一 层 aiv， 这 样 就 
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不 用 在 HTML 里 定义 其 他 附属 的 div 了 ，。 

D minHeight :100， 它 限制 改变 的 最 小 高 度 。 

D pinned:true， 此 参数 控制 可 拖 动 区 域 的 显示 状态 。 如 果 值 为 true， 则 可 拖 动 区 域 会 一 
直 显 示 在 表格 下 方 ; 如 果 为 false， 只 有 鼠标 悬 停 在 可 拖 电 区 域 上 方 时 才 会 出 现 。 具 体 配 
置 取 决 于 个 人 喜好 。 

D_ handlers: 's'，'s' 即 'south'。EXT 中 用 东 、 南 、 西 、 北 对 应 上 、 下 、 左 、 右 ， 用 首 
字母 来 设置 可 以 拖 放 的 方向 ， 具 体 的 配置 值 如 表 3-1 所 示 。 

D 最 后 别 息 了 注册 事件 rz.on('resize'，grid.syncSsize，grid) ;， 在 拖 放 完成 之 后 ， 
表格 会 调用 syncsize 方 法 修改 自己 的 大 小 ， 第 三 个 参数 是 函数 执行 的 scope。 


表 3-1 Reeizable 的 handlers 配 置 


值 英 文 中 文 值 英文 中 文 
"nm north 北 'Sw' southwest 西南 
'S south 南 | 'Se’ southeast 东南 
‘eB east 东 'ne' northeast 东北 
‘Ww’ west 西 | ‘all' all 所 有 方向 
‘nw northwest 西北 ] 
完整 代码 如 下 所 示 : 


var cm = new Ext .grid.ColumnModel (I[ 
{header:' 编 号 ' ,dataIndex:'id']， 
{header:' 名 称 ', dataIndex: 'name'}， 
{header: ' 描 述 ' ,dataIndex:'descn'] 


var data = [ 
('1', 'namel’','Gescnl'], 
['2','name2','descn2°'], 
['3', 'name3','descn3°'], 
['4','name4', 'descn4'], 
('5','name5', 'descn5'] 


Var store = new Ext .data.Storel{t 
Proxy: new Ext.data.MemoryProxy (dat.a), 
reader: new Ext.data.ArrayReader({}, i 
{fname: 'id'}, 
{name: 'name'}, 
{name: '‘'Gescn'} 
] ) 
})? 
store.1load!(); 


Var grid = new Ext.grid.GridPanel(t{ 
renderTo: 'grid', 
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store: store, 
cm: cm 


Var rz = new Ext.Resizablel(grid.getEl(), { 
wrap: true, 
minHeight:100, 
pinned:true, 


handles: ‘s' 


rz.onl'resize', grid.syncSize, grid); 


该 示例 在 03.grid/14-01-01.html 中 。 


3.14.2 在 同一 个 表格 里 拖 放 


在 同一 个 表格 里 拖 放 只 能 用 在 排序 上 ， 而 且 还 必须 是 在 少量 数据 的 情况 下 。 不 过 ， 因 为 EXT 
的 表格 内 置 了 对 拖 放 的 支持 ， 所 以 使 用 起 来 非常 方便 ， 只 需要 把 enableDragDrop 设 置 为 true 就 
行 了 。 

如 下 面 代 码 所 示 : 


var grid = new Ext .grid.GridPanel l(t{ 
renderTo: ‘grid', 
store: store, 
cm: cm, 
enableDragDrop: true 
}); 


如 此 一 来 ， 你 就 可 以 任意 拖 动 了 。 不 过 你 会 发 现 ，， 一 一 一 一 一 一 一 一 


拖 起 来 的 行 不 能 放下 ， 总 会 显示 一 个 禁止 放下 的 图 标 ， pe 
如 图 3-41 所 示 。 4 neme4 descn4 
虽然 表格 内 置 了 拖 放 开关 , 却 没有 默认 的 拖 放 处 理 。 0 Se 
函数 ,我 们 必须 添加 自 定义 的 处 理 函 数 , 才能 让 拖 起 来 ” ， ee es 
的 行 能 放下 去 。 
拖 起 来 的 行 放 不 下 去 是 因为 表格 里 没有 设置 @3 soiected rows 
DropTarget， 这 就 是 放置 被 拖 动 数据 的 目标 。 比 如 一 图 3-41 “” 拖 放 行 


堆 苹 果 和 一 个 篮子 ， 要 把 苹果 放 到 篮子 里 。 那 么 
DropTarget 相 当 于 篮子 ，DragTarget 相 当 于 苹果 ， 把 苹果 (DragTarget) 拿 起 来 ， 然 后 放 到 
篮子 (DropTarget) 里 去 。 这 样 讲 大 家 应 该 比较 清楚 了 吧 。 

现在 设置 一 个 DropTarget， 为 了 实现 在 同一 表格 中 进行 拖 忠 ， 我 们 就 把 当前 表格 作为 
DropTarget。 


对 grid.container 进 行 如 下 设置 (如 代码 清单 3-11 所 示 ),， 让 表格 的 容器 成 为 DropTarget 。 
代码 清单 3-11 设置 DropTarget 


var ddrow = new Ext.dd.DropTarget (grid.container, 1 
ddGroup : ‘GridDD', 
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copy 
noti 


} 
| 


这 样 就 把 grid.container 变 成 了 DropTarget。 看 到 ddGroup 了 吗 ? 这 个 分 组 名 称 必须 与 
Dragzone 里 的 分 组 一 样 ， 这 样 才 能 有 效果 。 表 格 里 默认 的 GdGroup 就 叫做 'Griqdpp'， 把 这 两 个 


: false, 
fyDrop : function{dd, e, data) 1 
// 选中 了 多 少 行 
var rows = data.selections; 
// 拖 动 到 第 几 行 


var index = dd.getDragDatal(e} .rowIndex; 


if (typeof{index) == "undefined") 《1 
return; 

} 

// 修改 store 


for(li = 0; i < rows.length; i++}) { 
Var rowData = rowslil]; 
if(l!this.copy) store.remove(rowData); 
store,insert (index, rowData); 


写成 一 样 即 可 。 


copy:false 决 定 了 拖 放 以 后 是 执行 前 切 操作 还 是 复制 操作 。 如 果 是 copy: false, 拖 过 去 以 
后 ， 原 来 的 数据 就 应 该 不 见 了 。 如 果 是 copy :true， 原 来 的 数据 不 会 发 生变 化 ， 这 里 当然 要 选择 


copy :false。 


然后 ，notifyDrop 对 应 的 函数 将 处 理 拖 放 事件 ， 这 个 函数 主要 分 成 如 下 3 部 分 。 


D 获得 你 选中 的 那 几 行 。 


D 根据 拖 放 事件 获得 拖 放 目标 的 行 索引 ， 不 过 得 到 的 索引 可 能 是 undefined， 此 时 我 们 就 


不 处 理 它 。 


D 把 刚 囚 


I 选中 的 那些 数据 拖 放 到 想 放 的 位 置 ， 如 果 是 copy : false， 先 删除 再 添加 数据 ， 否 


则 就 不 会 删除 数据 。 
完整 代码 如 下 所 示 : 


Var cm = 
(hea 
{hea 


new Ext .grid.ColummnModel ([ 
der:' 编 号 ' ,dataIngdex: 'id']】， 
der:' 名 称 ' ,dataIndex: 'name'}， 


{header: ' 描 述 ' ,dataIndex: 'descn'} 


var data 


"namel :Adescenl' 
', name2','descn2' 
'*, ‘name3', 'descn3' 


', ‘name5', 'descnS' 


, 'Nname4', 'descn4' 


EE 
和 


Var store = new Ext.data.Store(t 
proxy: new Ext .data.MemoryProxy (data), 
reader: new Ext.,.data,ArrayReader{{}, | 


Download at Pin5i.Com 


http://52pdf.taobao.com 


3.14 可 拖 放 的 表格 87 





{name: 'id'}, 
{name: ‘name'}, 
{name: 'descn'} 
] ) 
}} 
store,.load!{}); 


var grid = new Ext .grid.GridPanel{{ 
autoHeight: true, 
renderTo: '‘'grid', 
store: store, 
cm: cm, 
enableDragDrop: true 





FE 


var ddrow = new Ext.dd.DropTarget (grid.container, { 
ddGroup : 'GridDD' ， 
COPY : false， 
notifyDrop : function(dd，e，datalj I 
// 选中 了 多 少 行 
Var rows = data.selections; 
// 拖 动 到 第 几 行 


var index = dd.getDragData(e} .rowIndex; 


if (typeof (index) == “undefined") { 
return; 
// 修改 store 


forli = 0; ti < rows.length; i++) { 
Var rowData = rows[i); 
if{!this.copy) store.remove (rowData):; 
store.insert (index, rowData); 


用 
该 示例 在 03.grid/14-02-01.html 中 。 


3.14.3 ”表格 之 间 的 拖 放 


表格 里 的 数据 还 可 以 跨 表 格 拖 动 , 也 就 是 表格 之 间 可 以 互相 拖 动 。 下 面 还 会 讲 到 表格 与 树 之 
间 的 拖 动 。 

首先 ， 创 建 两 个 表格 ， 当 然 都 要 设置 enableDragDrop:true。 再 在 这 个 基础 上 配置 
DropTarget， 然 后 就 可 以 任意 拖 动 了 ， 如 下 面 的 代码 所 示 。 


var gridl = new Ex.grid.GridPanel({ 
renderTo: 'gridi', 
store: storel, 
Cm: cm, 
enableDragDrop: true 

EY 

var grid2 = new Ext.grid,.GridPanelt{{ 
renderTo; ‘grid2°', 
store: store2, 


Download at Pin5i.Com 


http://52pdf.taobao.com 


88 第 3 章 表格 控件 


cm; cm, 
enableDragDrop: true 
有 二 


这 里 创建 两 个 表格 gridl1 和 grid2， 分 别 对 应 着 各 自 的 Ext .data.Store。 然 后 ， 分 别 为 它们 创 
建 各 自 的 DropTarget。 这 里 的 修改 仅 针对 最 后 的 转移 数据 。 下 面 是 对 应 grid1 的 DropTarget， 它 
会 从 store2 中 删除 数据 ， 然 后 把 这 些 数据 添加 到 storel 里 ， 如 下 面 代码 所 示 。 


// 修改 store 

for(i = 0; i < rows.length; i++) { 
Var rowData = rowSs [ij]:; 
if(!this.copy) store2.remove (rowDatal) : 
storel.insert (index, rowData); 

} 


完整 代码 如 下 所 示 : 


var storel := new Ext .data.Storel(t{ 
proxy: new Ext .data.MemoryProxy{I[ 
['01', ‘name01','descn01')], 
['02', 'name02','Gescn02'], 
['03', 'name03','descn03')], 
['04','name04','Gdescn04'], 
['05', 'name05', 'Gdescn05')] 
]), 
reader: new Ext .data.ArrayReader({}, [ 
{name: ‘'id')}), 
{name: 'name'}, 
{name: 'Qescn'} 
] ) 
})3 
Var store2 = new Ext .data.Storelt 
proxy: new Ext .data.MemoryProxy!(| 
[('11', 'namell','descnll'], 
['12', 'namel2','descnl2' ),， 
['13', 'namel3','descn13'], 
[('14','namel4','descnl4'], 
上 
}); 
reader: new Ext.data,.ArrayReader{{}, I[ 
{name: 'id')}), 
{name: ‘name'}, 
{name: 'descn') 
] ) 
Ey 


storel .load!(); 
Store2 ,1oad() : 


Var cm = new Ext.grid.ColumnModel (I 
{header: ' 编 号 ' ,dataIndex:'id'}， 
{header:' 名 称 ' ,aataIndaex:'name')， 
{header: ' 描 述 ' ,GataIndex:'descn'} 

上 前 民 : 
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var gridl = new Ext.grid.GridPanel ({ 
autoHeight: true, 
renderTo: 'gridl', 
store: storel, 
cm: cm, 
enableDragDrop: true 
}} 3 
Var grid2 = new Ext.grid.GridPanell{{ 
autoHeight: true, 
renderTo: '‘'grid2', 
store: store2, 
cm: cm, 
enableDragDrop: true 





了 


var ddqrowl = new Ext.dd.DropTarget (gridl .view.mainBody, { 
ddGroup : 'GridDpD', 
copy : false, 
notifyDrop : function(dd, e, data) { 
// 选中 了 多 少 行 
var rows = data.selections; 
// 拖 动 到 第 几 行 
var index = dd.getDragDatafe) .rowIndex; 
if (typeof (index) == "undefined") I 
index = 0; 
} 
// 修改 store 
for{i = 0; i < rows.length; i++) { 
Var rowData = rows[i]; 
if (ithis,.copy) store2 .remove (rowData); 
storel.insert (index, rowData); 


由 区 


Var ddrow2 = new Ext.dd.DropTarget (grid2 .view.mainBody, 
dadGroup : 'GridDD'， 


copy : false, 
notifyDrop : function(dd, e, data) { 
// 选中 了 多 少 行 
Var rows = data.selections; 
// 扼 动 到 第 几 行 
var index = dd,getDragDatale) .rowIndex; 
if {typeof (index) == "undefined") { 
index = 0; 
} 
// 修改 store 


for(ti = 0; i < rows.length; i++) { 
Var rowData = rows[il; 
if(!this.copy) storel .remove (rowDatal) ; 
store2.insert (index, rowData); 


} 
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该 示例 在 03.grid/14-03-01.html 中 。 


3.14.4 ”表格 与 树 之 间 的 拖 放 2 


在 实现 这 个 功能 时 ， 下 面 这 些 步 又 需要 特别 注意 。 

(1) 首先 创建 一 个 表格 ， 然 后 创建 一 个 树 形 ， 这 样 才能 实现 它们 之 间 的 拖 放 。 

(2) 在 表格 里 加 上 enableDragDrop:true， 让 表格 支持 拖 放 。 使 用 grid.container 构 造 
DropTarget， 让 树 节点 可 以 放置 在 表格 上 。 

(3) 在 树 形 中 设置 enableDD:true， 从 而 启用 拖 放 功能 。 对 应 的 事件 是 nodedragover 和 
beforenodedrop。 

(4) 设置 aacroup, 如 我 们 之 前 所 说 的 ,只 有 让 表格 和 树 形 处 于 同一 aacroup 中 才能 成 功 拖 放 。 
表格 默认 的 aacroup 是 cridapD， 树 形 默认 的 adacroup 是 rreeDD， 只 需要 修改 其 中 之 一 即 可 。 我 
们 在 这 里 把 树 形 的 adGroup 改 成 GridpD。 

(5) 在 设置 了 这 些 之 后 ， 要 确保 grid.render() 在 tree.render () 之 后 才能 让 拖 放生 效 ， 否 
则 树 节 点 不 能 拖 电 到 表格 上 。 

完整 代码 如 下 所 示 : 


var cm = new Ext .grid.ColumnModel (I[ 
{header:;' 编 号 ' ,dataIndex: 'id'】， 
{header:' 名 称 ' ,dataIndex: 'name']， 
{header: ' 描 述 ', dataIndex: 'descn'} 


Var data = [ 
['1', namel', 'descnl'), 
['2','name2', 'descn2'], 
['3', 'name3','descn3'], 
['4', 'named', 'descn4'], 
('5', 'name5', +descn5'] 


Var store = new Ext .data.Storelt{ 
proxy: new Ext.data.MemoryProxy {data}, 
reader: new Ext.data.ArrayReader{{}, | 
{name:; 'id'}, 
{name: ‘name'}, 
{name: 'descn'} 
] ) 
}}; 
store.loadt{); 


var grid = new Ext.grid.GridPpanel{{ 
autoHeight: true, 
renderTo: '‘'grid':, 
store: store, 
cm: cm, 


QD 建议 先 阅读 本 书 第 5 章 中 与 “ 树 ” 有 关 的 内 容 后 再 来 阅读 本 小 节 。 
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enableDragDrop: true 


var ddrow = new Ext.dd.DropTarget (grid.view.mainBody, { 
ddGroup : ‘GridDD', 
copy : false, 
notifyDrop : function(dd, e, data}l{ 
} 





var tree = new Ext .tree.TreepPanel({ 

el: ‘tree', 

ddGroup; 'GridDD', 

enableDD: true, 

loader: new Ext.tree.TreeLoader{({dataUrl: ‘'03-04.txt'}) 
}) 7; 


Var root = new Ext.tree.AsyncTreeNode!l! 


text: ' 侦 是 根 : 
}); 
tree.setRootNode (root); 
tree.render!(); 
root .expand()}; 


tree.on('nodedragover', functionl(le) ({ 
3 

tree.on('beforenodedrop’', functiont{e)t 
}); 


该 示例 在 03.grid/14-04-01.html 中 。 
示例 中 没有 实现 拖 过 去 放下 的 效果 ， 因 为 树 形 的 数据 结构 与 表格 的 不 同 ， 同 时 还 要 考虑 拖 放 
父 节 点 的 情况 ， 从 表格 拖 放 多 行 到 树 形 。 这 些 就 要 根据 需求 具体 分 析 了 。 


3.15 ”表格 与 右键 菜单 
表格 提供 了 4 个 与 右键 菜单 有 关 的 事件 ， 如 下 所 示 。 


D contextmenu : ( Ext.EventObject e ) 
全 局 性 的 右键 事件 。 

口 cellcontextmenu : ( Grid this, Number rowIndex, Number cellIndex, 
Ext .EventObject e ) 
单元 格 上 的 右键 事件 。 

口 rowcontextmenu ; ( Grid this, Number rowIndaex，Ext .EventObject e ) 
行 上 的 右键 事件 。 

口 headercontextmenu : ( Grid this, Number columnIndex，Ext .EventoObject e ) 
表 头 的 右键 事件 。 

之 所 以 会 有 4 个 事件 ， 是 因为 表格 结构 复杂 ， 普通 的 右键 事件 不 能 精确 定位 右键 所 在 的 位 置 。 

如 果 让 用 户 自 己 确 定 鼠 标的 位 置 ， 然 后 再 去 判断 选择 的 范围 ， 几 乎 是 不 可 能 完成 的 任务 。EXT 细 
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分 了 各 种 事件 让 我 们 可 以 更 容易 实现 需求 。 
下 面 我 们 介绍 其 中 一 种 事件 rowconextmenu 的 使 用 方法 ， 先 看 看 图 3-42 吧 。 


如 号 名 入 和 

1 narme1 descn1 
2 name2 一 ER 
3 name3i 村 A 」 
4 named descnd4 
5 name5 dsscns 


图 3-42 ”右键 菜单 


看 起 来 并 没有 什么 特别 的 ， 我 们 仅仅 制作 了 一 个 菜单 ， 还 需要 使 用 rowcontextmenu 把 右键 
菜单 挂 在 表格 上 。 实 现 过 程 如 代码 清单 3-12 所 示 。 


代码 清单 3-12 ”实现 右键 菜单 


Var Contextmenuyu = new Ext .menu,Menut{!{ 
id: 'theContextMenu’, 
items: [{ 
text : ' 查 看 详情 '， 
handler: function()t 
} 
}] 
下 
grid.on("rowcontextmenu", function(grid, rowIndex, e)l{ 
e.preventDefault{); 
grid.getSelectionModel () .selectRow (rowIndex); 
Contextmenu.showaAt (e.getXY()); 
| 


contextmenu 部 分 只 是 新 建 了 EXT 提 供 的 组 件 menu， 并 没有 什么 奇特 的 。 在 监听 
rowcontextmenu 时 ， 回 调 函数 可 以 使 用 3 个 参数 : grid 是 当前 操作 的 表格 ，rowIndex 表 示 当 前 
鼠标 所 在 的 行 号 ，e 则 是 封装 好 的 事件 对 象 。 

在 触发 rowcontextmenu 时 ， 首 先 使 用 e.preventDefault () 防止 浏览 器 弹出 默认 的 右键 菜 
单 ， 然 后 调用 grid.getSelectionModel () .SelectRow (rowIndex) ;选中 这 一 行 。 这 是 我 们 使 
用 rowcontextmenu 的 主要 原因 ， 右 键 单 击 不 会 触发 cl ick 事 件 ， 不 会 在 表格 上 选中 一 行 ， 需 要 
我 们 手工 选择 ， 而 rowIndex 正 是 选中 行 的 索引 。 最 后 ，contextmenu . showat {e.getxY()) 就 
能 显示 菜单 了 。 

该 示例 在 03.grid/15-01.html 中 。 

如 果 我 们 想得到 一 个 单元 格 ， 就 需要 使 用 cellcontextmenu 事 件 ， 它 有 4 个 参数 ， 其 中 的 
rowIndex 和 cellIndex 可 以 决定 我 们 选中 哪 一 个 单元 格 。 以 此 类 推 ， 如 果 需 要 选择 表 头 ， 就 应 
该 使 用 headercontextmenu。 如 果 只 想 为 表格 提供 一 个 总 的 功能 菜单 ， 就 可 以 直接 选择 


contextmenuo 
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3.16 小结 


本 章 主要 介绍 了 如 何 使 用 EXT 中 的 表格 控件 。 从 一 个 最 简单 的 表格 实例 开始 ， 一 步 步 介 绍 了 
表格 需要 的 各 种 配置 。 同 时 还 讲解 了 表格 的 选择 模型 ， 通 过 配置 不 同 的 sm 修改 表格 的 内 部 行为 。 

对 表格 进行 分 页 和 排序 是 一 种 常见 的 功能 , 我 们 介绍 了 如 何 使 用 表格 在 前 台 和 后 台 进 行 分 页 
和 排序 ， 并 给 出 了 多 个 示例 。 

可 编辑 表格 EditorGrid 是 另 一 个 常见 的 表格 控件 。 我 们 从 一 个 最 简单 的 EditorGrid 开 始 ， 逐 步 
讨论 了 如 何 添加 和 删除 行 ， 如 何 将 修改 后 的 数据 提交 到 后 台 保 存 ， 以 及 如 何 对 输入 的 数据 进行 校 
验 和 类 型 限制 。 

随后 介绍 了 EXT 特 殊 表 格 控件 ， PropertyGrid 和 GroupingGrid， 并 讨论 了 与 表格 相关 的 几 种 拖 
放 形 式 。 

最 后 讨论 了 表格 上 与 右键 菜单 相关 的 问题 ， 并 根据 示例 进行 了 分 析 。 

EXT 3.0 中 为 表格 提供 了 更 多 效果 非凡 的 扩展 组 件 ， 可 以 参考 第 14 章 了 解 这 些 扩展 组 件 的 用 法 。 
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表单 与 输入 控件 LU 


本 章 内 容 

口 制作 表单 

口 FormPanel 和 BasicForm 详 解 
口 EXT 支 持 的 控件 

口 使 用 表单 提交 数据 
数据 校 验 

口 表单 布局 

口 ComboBox 详 解 

日 复 选 框 和 单 选 框 

口 文件 上 传 

口 自动 把 数据 填充 到 表单 中 


表单 是 EXT 中 一 道 绚 丽 的 风景 线 ， 初 看 那些 输入 控件 ， 好 像 只 是 修改 了 CSS 样 式 表 而 已 。 
打开 Firebug 查 看 一 人 DOM， 似 乎 确实 只 有 CSS 发 生 了 变化 ， 隐 藏 在 漂亮 界面 下 的 依然 是 原来 的 
Input 控 件 。 从 这 点 来 看 ， 似 乎 没有 使 用 EXT 的 必要 。 但是， 你 不 想 用 默认 的 数据 校 验 吗 ? 你 不 想 
在 数据 校 验 失败 时 有 突出 的 提示 效果 吗 ? 你 不 想 要 超 炫 的 下 拉 列 表 Combox 吗 ? 你 不 想 要 一 些 梦 
窜 以 求 的 选择 控件 吗 ? 正 因 为 EXT 提 供 了 这 些 绚丽 的 功能 ， 所 以 我 们 建议 你 还 是 尝试 一 下 EXT 的 
表单 (Form〉 和 对 应 的 输入 控件 。 


4.1 制作 表单 
我 们 先 来 看 一 个 制作 表单 的 简单 示例 ， 实 现 过 程 如 代码 清单 4-1 所 示 。 
代码 清单 4:1 制作 一 个 简单 的 表单 


var form = new Ext.form.FormPanelt{{ 
defaultType: 'textfield', 
labelAlign: 'right', 
titles EoOrm's 
labelWidth: 50, 
buttonAlign: 'center', 
frame: true, 
width: 220, 
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items: [1{ 

fieldLabel: ' 文 本 框 ' 
> 
buttons: [{ 


text: ' 按 钮 * 
: 9 form 
I (*form")}; 文本 框 : 
结果 如 图 4-1 所 示 。 
HTML 里 不 需要 那么 多 东西 了 ， 只 需要 定义 一 个 aiv 
ida="form" 就 可 以 实现 这 一 切 。 初 始 配置 显然 变 得 更 紧凑， 
利用 items 和 buttons 指 定 包 含 的 控件 和 按钮， ml 一 人 0 的 于 


我 们 先 对 此 有 一 个 初步 的 认识 ， 稍 后 会 有 更 详细 的 介绍 ， 示 例 见 04.formv01-01.htmi。 


4.2 FormPanel 和 BasicForm 详解 


如 上 面 的 示例 所 示 ， 我 们 要 制作 一 个 Ext , form.FormPanel， 然 后 在 里 面 设置 fiel19。 顾 名 
思 义 ，FormPanel 是 Ext .Panel 的 一 个 子 类 ， 可 以 对 其 执行 各 种 Panel 的 操作 。 实 际 上 ， 表 单 的 
功能 是 在 Ext .form.BasicForm 中 实现 的 ， 在 获得 Ext . form.FormPanel 之 后 ， 随 时 都 可 以 用 
getForm() 方 法 获得 BasicForm 对 象 。 我 们 可 以 在 得 到 的 BasicForm 上 执行 “提交 表单 数据 ”和 
“复位 表单 初始 值 ”等 操作 。 

引入 Ext .form.FormPanel 的 最 大 好 处 就 是 利于 布局 ，Ext .form.FormPanel 继 承 了 
Ext .Panel。 我 们 可 以 把 Ext . form.FormPanel 放 到 Ext .Viewport 中 作为 整个 页 面 布局 的 一 部 
分 ， 同 时 也 可 以 利用 items 指 定 Ext .form.FormPanel 内 部 的 子 组 件 。 如 其 他 Panel 一 样 ， 可 以 通 
过 xtype 来 指定 每 个 子 组 件 的 类 型 ， 而 不 必 手 工 创建 它们 。 


4.3 ”EXT 支持 的 控件 
下 面 我 们 来 逐一 介绍 EXT 中 提供 的 各 种 输入 控件 。 


4.3.1 控件 继承 图 


EXT 中 提供 的 输入 控件 包括 TextField、TextArea、CheckBox、Radio、ComboBox、DateField、 
HtmlEditor、Hidden 和 TimeField。 所 有 这 些 控件 的 继承 关系 如 图 4-2 所 示 。 


"= 


[ 






“Ext form CheckBox 









ER 


sk 
EXUTOND COmDeBo 





[IT 





图 4-2 EXT 支持 的 控件 的 继承 关系 图 
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4.3.2 ”表单 控件 
图 4-3 展 示 了 EXT 中 支持 的 所 有 组 件 ， 这 些 组 件 的 用 法 将 在 后 面 详 细 讨论 。 


FF 弟 姨 输入 7 清净 

文本 7 普 先 要 从 上 
:| 扩 热 后 要 吃 坟 
渤 区 ;| 言 先 皖 ” de 
SN: 三 行路 方便 
时 间 : v 
多 行 到 单 迁 

他 湿 亡 自由 

个 祈求 汪 情 





te 


保 爷 污 取 | 职 商 


图 4-3 ”输入 控件 预览 
该 示例 的 完整 代码 如 下 : 


Ext .onReady (function(){ 


// HtmlEditor 需 要 这 个 
Ext .QuickTips.init(); 


Var form = new Ext.form.FormPanell(t{ 
labelAlign; '‘'right', 
lapelWidth: 50, 
width: 600, 
title:; 'form', 
frame: true, 
items: [{ 

layout: 'colurn'， 

items: [{ 
colurmWwidth: .7, 
xtype: 'fieldset', 
checkboxToggle:true， 
title: ' 单 纯 输 入 '， 


Download at Pin5i.Com 


http://52pdf.taobao.com 


4.3 EXT 支持 的 控件 97 





autoHeight:true, 
defaults: {width: 300}, 
defaultType: 'textfield', 
items: [{ 
fieldLabel: ' 文 本 '， 
name: 'text' 
},{ 
xtype: 'numberfield', 
fieldUabel: ' 数 字 '， 
name: ‘number’ 
} 
xtype: "combo", 
fieldLabel: ' 选 择 '， 
name: ‘combo', 
store: new Ext.data.SimpleStorel(t{ 
fields: {['value', 'text'), 
data: [ 
['valuel', '‘'text1l1']), 
['value2', 'text2°'] 





] 
Fs 
displayField: 'text', 
valueField: ‘value', 
mode: '1ocal ' ， 
emptyText : ' 请 选择 ' 
于 
xtype: 'datefield', 
fieldbLabel: ' 日 期 '， 
name: ‘date' 
p> 
xtype: 'timefield', 
fieldLabel: ' 时 间 '， 
name: ‘time' 
证 
xtype: ‘textarea', 
fieldbLabel: ' 多 行 '， 
name: 'textarea' 
kit 
xtype: 'hidden', 
name: ‘hidden' 
}] 
}it 
columnwidth: .3, 
layout:*form', 


items:[{ 
xtype: ‘fieldset', 
checkboxToggle:true, 
title:; ' 多 选 '， 


autoHeight :true, 

defaultType: 'checkbox ' ， 
hideLabels: true, 

style: 'margin-left:10px;', 
bodyStyle: ‘margin-left:20px;', 
items: [1 
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boxLabel: “首先 要 穿 暖 '， 
name: 'check', 
value: '1', 
checked: true, 
width: 'auto' 
A! 
”boxLabel:; ' 然 后 要 乃 饱 ' ， 
name: 'check', 
value: '2°', 
checked: true, 
width: ‘auto'’ 
Pz 
boxLabel: “' 房 子 遮 风 避 两 ' ， 
name: ‘check', 
value: '3', 
width: ‘auto'’ 
},1{ 
boxLabel : ' 行 路 方便 '， 
name: 'check', 
value: '4', 
width: 'auto' 
}] 
},t 
xtype: 'fieldset', 
checkboxToggie:true, 
title; ' 单 选 '， 
autoHeight :true, 
defaultType: 'radio', 
hideLabels: true, 
style: ‘margin-left:10px;', 
bodyStyle: 'margin-left:20px;', 
items: [1 
boxLabel: ' 汐 遍 自 由 '， 
name; ‘rad', 
value: '1', 
checked: true, 
width: 'auto'! 
j 
boxLabe1l: ' 祈 求爱 情 ' ， 
name: 'rad', 
Yalues “人 
width: ‘auto' 
}] 
}] 
}] 


layouts ‘torm's 

labelAlign: "上 op'， 

itrems; [{ 
xtype: ‘htmleditor', 
fieldLabei: ' 在 线 编辑 器 ' ， 
id:; 'editor', 
anchor: ‘98%' 

网! 
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jj， 
buttons: [{ 


text : ' 保 存 ' 
}, 

text : ' 读 取 ' 
Es 

text: ' 取 消 ' 


}] 
号 民 : 


form. render ("form"):; 


es 


4.3.3 基本 输入 控件 Ext .form.Fiela 


Ext .form.Field 是 所 有 表单 输入 控件 的 基 类 ， 其 他 的 输入 控件 都 是 基于 Ext . form.Fiela 
扩展 得 来 的 。Ext .form.Field 中 定义 了 输入 控件 通用 的 属性 和 功能 函数 ， 这 些 通用 的 属性 和 功 
能 函数 大 致 分 为 3 大 类 : 页 面 显示 样式 、 控 件 参 数 配 置 和 数据 有 效 性 校 验 。 

D 页面 显 示 样 式 : 包括 clearcls、cls、fielaclass 、focusclass 、itemcls 、 

invalidClass、labelstyle 等 属性 ， 它 们 分 别 用 来 定义 不 同 状态 下 输入 框 采用 的 样式 。 

D 控件 参数 配置 : 包括 autoCreate、disabled,、 fieldLabel、 hideLabel、inputType、 
labelSeparator、name、readonly、tabIndex、value 等 属性 ， 它 们 主要 用 来 设置 输 
入 控件 生成 的 DOM 内 容 和 标签 内 容 ， 以 及 是 否 禁用 和 是 否 可 读 等 配置 。 

D 数据 有 效 性 校 验 : 包括 invalidText 、msgFx、msgTarget 、valiaateonBlur 、 
validateDelay、validateEvent 等 属性 ， 它 们 用 来 设置 数据 校 验 的 方式 以 及 如 何 显示 
错误 信息 。 

我 们 先 来 看 看 表单 输入 控件 可 以 使 用 的 校 验 显示 方式 。 默 认 情 况 下 ， 这 些 输入 控件 会 监听 
blur 事 件 , 如 果 数 据 校 验 失 败 就 会 根据 msgTarget 中 的 设 轩 显示 错误 信息 。 通常 nsgTarget 会 被 
设置 为 'qtip', 即使 用 QuickTip 显 示 错 误 信 息 , 也 可 以 将 msgTarget 设 置 为 title、 side、 under 
中 的 一 种 ， 这 样 错误 信息 就 会 以 指定 的 方式 显示 。 因 为 所 有 的 输入 控件 都 继承 自 Ext . form. 
Field， 所 以 我 们 可 以 为 任何 一 个 表单 输入 控件 进行 这 些 设 置 ， 改 变 它 们 的 错误 信息 显示 方式 。 

修改 msgTarget 的 错误 提示 方式 ， 如 下 面 的 代码 所 示 。 


Ext .QulickTips init Cy 


var fieldl = new Ext .form.Fieldr({ 
fieldLabel: ‘atip', 

msgTarget: 'gqtip' 
为 大 
var field2 = new Ext.form.Fieldl(t 
fieldLapbel: 'title', 

msgTarget: 'title' 
区 3 
var field3 = new Ext.form.Fieldlt 
fieldLabel: 'side', 
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msgTarget: 'side' 
由 
var field4 = new Ext.form.Fieldt{{ 
fieldLabel: 'under ' ， 
msgTarget: 'Unader， 
了 全 


Var form = new ExXt .form.FormpPanel ({ 

title; ‘form!,; 
frame: true, 
items: [fieldl, field2, field3, field4], 
renderTo: 'form' 


fieldl .markInvalid{); 
field2.markInvalid!(); 
field3 .markInvalid!(}; 
field4 .markInvalid(); 


form 
atip: 
上 面 代 码 中 的 markInvaliad() 函数 用 来 显示 we: 
Side: 
under 





field 校 验 出 错 样式 。 原 本 field 需 要 onblur 时 才能 
进行 校 验 并 显示 出 错 样式 ， 在 这 里 为 了 演示 方便 ， 直 
接 使 用 了 markInvaliad() 函数 。 图 4-4 演 示 了 4 种 不 同 
的 错误 显示 方式 。 图 4-4 4 种 错误 提示 效果 


4.3.4 文本 输入 控件 Ext .form.TextField 


Ext .form.TextField 直 接 继 承 自 Ext .form.Field， 它 是 一 个 专门 用 来 输入 文本 数据 的 输 
入 控件 。 除 了 Ext . form. FieldG 中 提供 的 通用 属性 和 功能 函数 外 ，Ext . form. TextField 最 常用 
的 特性 就 是 可 以 检测 内 部 输入 的 数据 是 否 为 空 ， 还 可 以 控制 输入 数据 的 内 容 及 最 大 最 小 长 度 ， 如 
下 面 的 代码 所 示 。 


var field = new Ext.form.TextFieldt{t{ 
fieldLabel: 'empty', 
allowBlank: false, 
emptyText: ' 空 '， 
maxLength: 50, 
minLength: 10 
js 


上 例 中 ， 我 们 为 Ext .form.TextField 设 置 了 非 空 检 ， om 

测 ， 并 限制 输入 的 字符 数 必 须 在 10 至 $0 之 间 。 其 中 empty: 

emptyText 会 在 输入 为 空 时 显示 一 个 默认 的 提示 信息 ， 这 为 

我 们 提供 了 良好 的 用 户 体验 ， 如 图 4-5 所 示 。 图 4-5 ”使 用 emptyText 设 置 提示 信息 
然后 我 们 将 上 面 的 fiela 放 入 form 中 ， 再 泻 染 在 id 为 form 的 div 上 。 如 下 面 代码 所 示 ; 


Var form = new Ext .form,FEormPanel{t{ 
title: ‘form'; 
frame: true, 
items: [field}), 
renderTo: 'form' 


MAE OCA A atte ed 
DD The value in this hetd is rvald 
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表单 控件 最 后 都 是 放 入 表单 中 ， 然 后 泻 染 到 aiv 中 的 。 因 此 下 面 介绍 的 表单 控件 会 省 略 这 部 
分 代码 。 


4.3.5 ”多 行文 本 输入 控件 Ext .form.TextArea 


Ext .form.TextArea 也 是 用 来 输入 文本 的 输入 控件 ， 与 Ext . form.TextField 的 不 同 之 处 
是 ， 它 可 以 输入 多 行文 本 。 除 此 之 外 ， 两 者 的 用 法 都 是 相同 的 。 我 们 在 使 用 它 时 只 需要 设置 对 应 
的 长 度 和 宽度 就 可 以 了 ， 如 下 面 的 代码 所 示 。 


var field = new Ext.form.TextAreal{'{ 
wa Qo, 4 
grow: true, 


preventScrollbars: true, 
fieldLabel: ‘empty', 
allowBlank: false, 
emptyText: ' 空 '， 
maxLength: 50, 
minLength: 10 

Fs 


上 例 中 将 Ext .form.TextArea 的 宽度 设置 为 200， i 
对 于 grow:true 的 情况 ，Ext . form.TextArea 会 根据 输 rey 第 
入 的 内 容 自动 修改 自身 的 高 度 ， 而 不 是 像 Ext . form. 好 
TextField 那 样 修改 自身 的 宽度 。prevent scrollbars 六 
参数 的 用 途 是 防止 出 现 滚 动 条 , 如果 内 容 超 出 显示 范围 ， 
就 会 自动 隐藏 。 图 4-6 Ext .form.Textarea 根 据 输 

Ext . form.Textarea 的 显示 效果 如 图 4-6 所 示 。 入 数据 自动 调节 高 度 


4.3.6 “日 期 输入 控件 Ext .form.DateField 


Ext .form.DateField 是 平时 经 常用 到 的 日 期 选择 控件 ， 除 了 弹出 日 历 选择 日 期 的 功能 之 外 ， 
它 还 支持 所 有 Ext .form.Field 以 及 Ext .form.TextField 


中 定义 的 功能 ， 如 下 面 的 代码 所 示 。 Pm 
var field = new Ext.form.DateFieldl(t ie ee 
fieldLabel: ' 日 期 '， 
emptyText : ' 请 选择 '， pe pi ee 二 加 
format: 'Y-m-G'， 8 oF 
disabledDays: [0,6] 15 16 17 18 19 
}); BHM B26 
上 例 中 的 format 参数 表 示 如 何 保存 并 显示 选中 的 日 0 
期 ， 我 们 可 以 采用 任意 的 模式 显示 选中 的 日 期， a 


disabledDays 的 参数 值 是 一 个 数组 ， 内 部 可 以 包括 0 至 7 的 
整数 ， 它 可 以 禁止 用 户 选 择 一 周 内 的 特定 日 期 ， 上 例 的 显示 图 4-7 ”禁止 DateField 选 择 每 周 
效果 如 图 4-7 所 示 。 的 周 六 和 周 日 
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4.3.7 时间 输入 控件 Ext .form.TimeField 


Ext .form.TimeField 是 用 来 选择 时 间 的 输入 控件 ， 它 可 以 通过 指定 一 天 中 的 起 始 时 间 、 结 
束 时 间 以 及 时 间 间 喇 的 方式 来 为 用 户 提供 可 供 选择 的 时 间 ， 如 下 


面 的 代码 所 示 。 form 
Var field = new EXxt .form.TimeField(( OD A ~ 
fieldLabel: ‘时 间 '， 10:30 AM 
emptyText : ' 请 选择 ' ， 1i00 aM 
minValue: '10:00 AM', 11:30 AM 
maxvalue: '14:00 PM', 12:00 PM 
increment: 30 dy 
陋 5 
在 上 面 的 代码 中 , 我 们 将 起 始 时 间 设 置 为 上 午 10:00 点 , 结束 a 
时 间 设 置 为 下 午 14:00 点 ,时 间 间 隔 为 30 分 钟 ， 这 样 我 们 就 得 到 了 图 4-8 ”使 用 TimeField 设 置 时 间 
从 10:00 AM 至 14:00 PM 的 9 个 时 间 选 项 。 页 面 显示 效果 如 图 4-8 所 的 选择 范围 
示 。 


4.3.8 ”在线 编辑 器 Ext .form.HtmlEditor 


Ext .form.HtmlEditor 是 一 个 简易 的 在 线 编辑 器 ， 能 对 文本 进行 各 项 设置 。Ext . form. 
HtmlEditor 的 页 面 显 示 样 式 如 图 4-9 所 示 。 


form 


在 的 机 得 蝇 :。。 |Tehomas 悦 ax AAA A 大 省 性 者. 生 晤 | 色 


里 中 对 弄 
在 对 弄 
1， 有 有 序 队 列 
s 无 序 内 到 


图 4-9 ”使 用 在 线 编 辑 器 编辑 文本 样式 
Ext .form.HtmlEditor 的 使 用 方法 如 下 面 的 代码 所 示 。 


var field = new Ext.form.HtmlEditor({t 
fieldbLabel : ' 在 线 编辑 器 ' ， 
enableAlignments: true, 
enableColors: true, 
enableFont: true, 
enableFontSize:; true, 
enableFormat: true, 
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enableLinks: true, 

enableLists: true, 

enableSourceEdit: true 
})3 


在 Ext .form.HtmlEditor 中 ， 可 以 用 对 应 的 enable 选 项 启用 或 禁用 对 应 的 功能 按钮 ， 以 此 
控制 提供 给 用 户 使 用 的 各 种 功能 。 


4.3.9 隐藏 域 Ext .form.Hidden 


Ext .form.Hidden 直 接 继承 自 Ext .form.Field, 可 以 通过 它 的 setValue ({) 和 getValue () 
阔 数 对 它 执行 赋值 和 取 值 操作 ， 但 它 不 会 显示 在 页 面 上 。 当 想 保 存 一 些 需 要 隐藏 的 数据 时 ， 可 以 
使 用 Ext . form.Hidaen， 如 下 面 代码 所 示 。 


var field = new Ext.form.Hiddent{{ 
name: ‘hiddenId’ 

让 

fielG.setValuel"sorme thing"); 

Var Value = fielaG.getValuel ); 





4.3.10 ”下拉 输 入 框 Ext .form.TriggerField 


Ext .form.TriggerField 是 ComboBox、DateField 和 TimeField 的 父 类 ， 它 既 可 以 手工 录 
入 数据 ， 也 可 以 通过 选择 录入 数据 。 为 了 显示 下 拉 选 择 的 功能 ， 我 们 需要 覆 写 它 的 
onTriggerclick() 函 数 以 实现 弹出 窗口 ， 如 下 面 的 代码 所 示 。 


var field = new Ext.form.TriggerField!(t 
fieldLabel: ' 选 择 '， 
name:; ‘'name', 
onSelect: function{recora)t 
Fs 
onTriggerClick: function{() 1{ 
if (this.menu == null) 1 
this.menu = selectMenu; 
} 
this.menu.show{this.e]l, “tl1-bl?"); 
} 
i 


在 自 定义 的 onTrigserclick() 函数 中 , 我们 判断 当前 对 象 的 menu 属 性 是 否 存在 ,如 果 不 存 
在 ， 则 把 menu 属 性 设置 为 selectMenu， 最 后 将 菜单 显示 出 来 ， 这 里 的 t1-bl1? 表 示 弹 出 菜单 的 左 
上 角 或 左下 角 与 Ext . form.TriggerField 对 齐 。 

这 里 使 用 的 selectMenu 是 预先 创建 的 一 个 Ext .menu Menu 实例， 我 们 为 这 个 菜单 添加 了 一 
个 Ext .grid.GridPanel, 并 为 Ext .griG.GridPanel 设 置 了 监听 函数 ， 在 单 击 任意 一 行 时 都 可 
以 将 对 应 行 的 索引 值 赋值 给 Ext . form.TriggerField， 并 隐藏 菜单 ， 代 码 如 下 所 示 。 


grid.on('rowclick', function(grid, rowIndex, e) { 
selectMenu.hide(); 
field.setvVvalue (rowIindex):; 

Fs 


Download at Pin5i.Com 


http://52pdf.taobao.com 


104 第 4 章 表单 与 输入 控件 


最 终 的 页 面 显示 效果 如 图 4-10 所 示 。 


form 和 和 ge mee 
园 择 : 1 六 
姓名 恬 别 各 三 
neame' temale descnl 


图 4-10” 自 定义 TriggerField 从 表格 中 选择 数据 
示例 的 完整 代码 如 下 : 


var grid = new EX .grid.GridPanel{t{ 
width: 300, 
autoHeight: true, 
Litles "oqrid' 
store: new Ext.datra.SimpleSstorelt{ 
data: |[ 
['namel', ‘female','descnl'], 
['name2', 'male', 'descn2') 
}， 
fields: ['name','sex', 'descn'] 
1), 
columns: [ 
{header:' 姓 名 ' ,dataIndex: 'name']， 
{header: ' 性 别 ', dataIndex: 'sex'}， 
{header:' 备 注 ' , dataIndex: 'descn'} 
]; 
viewConfig: { 
forceFit: true 


} 


Var selectMenu = new Ext ,menu .Menu ({ 
items: [new Ext .menu.Adapter (grid)] 


var field = new Ext.form.TriggerFieldl(t{ 

fieldLabel: ' 选 择 '， 
name: ‘name', 
onSelLect: function(record})t 
bs 
onTriggerClick: function{} { 

if (this.menu == null) 1 

this.menu = selectMenu; 
} 
this.menu,show(this.el, "tl]-bl?°"); 


}); 


grid.on('rowciick', function{grid, rowIndex, e)} { 
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selectMenu.hide!(); 
field.,setValue (rowIndex),; 


var form = new Ext .form.FormPanel({ 
titie: ‘form’; 
frame: true, 
items: [field], 
renderTo: 'form' 
站 


4.4 使 用 表单 提交 数据 


表单 最 重要 的 功能 就 是 向 后 台 提交 数据 。 但是， 普通 的 HTML 表 单 只 能 执行 最 单纯 的 提交 ， 
EXT 中 的 表单 却 支 持 3 种 形式 的 提交 : 原始 HTML 表 单 形 式 的 提交 和 两 种 Ajax 形式 的 提交 。 接 下 
来 我 们 会 详细 讲解 这 些 内 容 。 

下 面 的 示例 是 一 个 只 包含 一 个 TextField 的 表单 ， 我 们 把 这 些 数据 提交 到 后 台 。 


4.4.1 ”EXT 默认 的 提交 形式 
表单 对 象 拥有 一 个 submit 函 数 ， 用 途 就 是 提交 数据 ， 如 代码 清单 4-2 所 示 。 
代码 清单 4-2 ”默认 提交 方式 


Ext .onReady (function()t{ 
var form = new Ext.form,.FormPanel{t{ 
defaultType: ‘textfield', 
labelAlign: 'right', 
title: 'Eormt， 
labelwidth: 50, 
frame:true, 
width: 220, 
rls "0d O00 
items: [{ 
fieldLabel: ' 文 本 框 '， 
name; 'text' 
}]，, 
buttons: [{ 
text: ' 按 钮 '， 
handler: function() { 
form.getFormt{) .submit{); 





} 
}] 
}); 
form.render{"form"); 
3 


这 里 要 为 form 设 置 一 个 URL 参 数 ， 表 示 表 单数 据 将 被 提交 到 该 路 径 。 记 得 给 TextField 加 上 
一 个 name 属 性 ， 这 样 后 台 才 知道 接收 到 的 数据 来 自 哪 个 控件 。 最 后 看 一 下 EXT 中 的 按钮 ，text 
表示 按钮 显示 的 文字 , handler 则 是 单 击 按钮 时 调用 的 函数 。 这 里 直接 调用 表单 的 submit () 函数 ， 
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将 整个 表单 中 的 数据 提交 到 后 台 。 

因为 FormPanel 是 布局 容器 ， 没 有 提供 submit () 函数 ， 所 以 要 先 获得 它 内 部 包含 的 
BasicForm， 才 能 提交 。 

在 该 示例 中 ， 后 台 接 收 数据 的 脚本 是 04_01_01.jsp， 与 以 前 的 方式 相同 ， 唯 一 的 区 别 就 是 不 
再 跳 转 ， 只 需要 返回 一 个 JSON 字 符 串 提示 操作 是 否 成 功 ， 如 下 面 的 代码 所 示 。 


<%@ page contentType="text/html;charset-=utf-8"$%> 
三 人 
request .setCharacterEncoding ("UTF-8"); 
response.setCharacterEncoding ("UTF-8"),; 
String text = request .getParameter ("text"); 
System.out .println(text); 
response.getWriter() .print (*"{success:true,msg: ' 成 功 ']}")， 
多 > 
示例 见 04.form/04-01-01.html 和 04_01_01.jsp。 
解决 了 一 个 问题 ， 另 一 个 问题 又 出 现 了 。 表 单 默 认 使 用 Ajax 提交 数据 ， 我 们 怎么 知道 提交 是 
和 否 成 功 呢 ? 当 按 下 “提交 ”按钮 时 没有 任何 反应 该 怎么 办 呢 ? 别 急 ， 连 Ajax 都 是 可 以 回调 的 ， 何 
况 表单 还 封装 了 自己 的 处 理 方式 。 
要 想 获得 反馈 ， 首 先 要 修改 submit 方 法 ， 让 它 支持 更 多 的 功能 ， 如 下 面 的 代码 所 示 。 
form.getForm() .submit({ 
Success:function(form, action}{ 
Ext .Msg .alert (' 信 息 '，action.result .msg); 
} [4 


failure:function()t 


Ext .Msg .alert (' 错 误 '，' 操 作 失 败 ! ')， 


} iorryy 


} ) ， 六 未 框 5 dd 
按 下 “提交 ”按钮 ， 如 果 成 功 ， 就 会 出 现 图 4-11 的 效果 。 人 
在 上 面 的 代码 中 ，success 和 failure 各 自 对 应 一 个 函 I 
数 ， 与 直接 使 用 Ajax 有 些 不 同 。 | 
D 函数 中 传 入 的 参数 不 一 样 : 第 一 个 参数 是 form， 第 二 和 省 世 二 在 
个 参数 是 action。 图 4-11 提交 成 功 


日 触发 的 条 件 不 同 。 

在 Ext .1ib.Ajax 中 ， 判断 究竟 是 调用 success 还 是 failure 的 条 件 与 业务 无 关 。 如 果 Http 
啊 应 成 功 ， 就 执行 success; 如 果 出 现 404 或 500 错 误 ， 就 执行 failure。 

form 中 的 success 和 failure 则 是 与 业务 相关 的 ， 只 有 后 台 响 应 为 true 或 响应 的 JSON 中 包 
含 success:true 时 ， 才 执行 success () 函数 。 不 过 ， 这 样 一 来 Etailure{) 函 数 就 复杂 了 ， 如 何 
判断 是 连接 失败 ， 还 是 业务 上 出 了 问题 呢 ? 为 了 区 分 它们 ，EXT 默 认 规定 ; 如 果 响 应 的 JSON 中 
是 success 不 是 true， 并 且 响 应 的 JSON 中 包含 errors: 1{}， 那么 就 认为 是 业务 错误 ; 如 果 不 包 
含 errors:{}, 就 认为 是 连接 失败 。 当 业务 错误 时 , 用 this. failureType = Ext .form.Action. 
SERVER_INVALID; 标 记 ， 可 以 通过 action. failureType 进 行 判 断 。 
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这 里 就 是 封装 的 结果 , 第 一 个 参数 是 form 对 象 , 如 果 想 实现 表单 的 功能 , 直接 使 用 这 个 form 
参数 便 可 。 例 如 ， 想 在 提交 一 次 之 后 清空 所 有 数据 ， 直 接 用 form.reset () 就 行 了 。 第 二 个 参数 
是 响应 的 信息 ，action .result 给 我 们 提供 了 一 个 简易 通道 ， 这 样 省 去 了 先 获 得 responseText 
再 转换 成 JSON 的 麻烦 ， 现 在 可 以 直接 从 它 里 边 调 用 返回 的 JSON 数 据 了 。 比 如 ， 后 台 返 回 的 信息 
就 可 以 直接 通过 action.result.msg 获 得 。 

示例 见 04.form/04-01-02.html。 


4.4.2 使 用 HTML 原始 的 提交 形式 


EXT 默 认 的 提交 形式 是 不 会 进行 页 面 跳 转 的 ， 主 要 是 考虑 到 “one page one application”( 在 
同一 个 页 面 中 实现 整体 应 用 ) 的 形式 。 但 是 ， 有 的 用 户 还 是 希望 在 点 击 “ 提 交 ” 按 钮 后 就 可 以 跳 
转 到 其 他 页 面 。 在 EXT 里 这 并 不 是 什么 难事 ， 不 过 要 再 次 强调 一 下 ，EXT 的 本 质 就 是 JavaScript， 
原来 JavaScript 能 做 的 事情 它 都 可 以 做 。Ext .form.Form Pane1l 也 只 是 对 原始 的 FoRM 标 签 进行 了 
装饰 而 已 。 找 出 那个 我 们 都 熟悉 的 FORM 标 签 ， 直 接 在 它 上 面 调用 submit () 就 可 以 了 。 

其 实 ， 难 点 就 在 于 找 出 Ext . form.Form 中 层 层 包 于 的 FORM 标 签 。 注 意 ，EXT 中 所 有 的 控件 
都 有 el，el 都 是 有 DOM 的 ， 这 个 DOM 模 型 就 是 EXT 控 件 在 页 面 上 真实 对 应 的 部 分 了 。 于 是 我 们 
只 需要 修改 按钮 的 handler 函 数 ， 如 下 面 的 代码 所 示 。 


handler: function{} { 
form.getForm() .getEl() .dom.action = "04_01._01.jsp"; 
form.getForm() .getEl() .dom.submit!{); 





} 


要 注意 的 是 ，EXT 动 态 生 成 了 表单 ， 却 没有 把 act ion 部 分 添加 上 。 如 果 对 action 进 行 手工 
设置 ， 它 就 只 能 刷新 当前 页 面 了 。 

单 击 “ 提 交 ” 按 钮 ， 页 面 就 会 刷新 ， 随 即 变 成 04_01 01jsp 了 。 页 面 上 会 显示 本 来 应 该 传 给 
Ajax 的 字符 串 。 切 记 ， 这 样 造成 的 页 面 跳 转 很 可 能 会 导致 “one page one application” 系 统 变 得 率 
乱 ， 还 是 建议 在 普通 的 环境 下 使 用 。 

示例 在 04.form/04-02-01.html 中 。 


4.4.3 单纯 Ajax 


这 里 跳 过 表单 自 带 的 Ajax 功能 ,使 用 单独 的 Ajax。 实 际 上 ， 表 单 自 身 的 submit 就 使 用 了 Ajax 
方式 。 不 过 ， 如 果 你 想 进一步 控制 表单 里 的 数据 ， 那 么 调用 Ajax 也 是 一 个 不 错 的 选择 。 
既然 是 使 用 外 部 Ajax， 我 们 就 只 需 知道 如 何 从 中 把 字段 的 数据 取出 来 ， 有 以 下 几 种 方式 。 
O form.getValues () 函数 : 它 有 一 个 参数 ， 如 果 参 数 是 true， 就 返回 JSON 组 装 的 字符 串 ; 
如 果 是 ftalse， 就 返回 JSON 对 象 ， 对 应 其 中 每 个 字段 的 名 称 和 值 。 默 认 是 false。 
D finaFielda() 函 数 : 它 可 以 获得 表单 里 的 控件 。 例 如 ， 我 们 现在 有 一 个 TextField， 名 
称 是 text， 那 么 就 可 以 通过 下 面 的 方式 获得 。 


Var text = form.getForm() .findFieldl('text'); 


我 们 使 用 最 简单 的 getValues (true) 函数 来 配合 Ajax， 用 getValues (true) 获得 数据 ， 然 
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后 用 Ajax 传递 给 后 台 ， 最 后 判断 回调 ， 如 下 面 的 代码 所 示 。 


handiler: function() f{ 
var text = form,getForm() .findField('text'); 


Ext .1ib.Ajax.requestt 

“POST ' ， 

‘O01 OTsp'; 

{success:function(response){ 
Var result = Ext.decode (response.responseText):; 
Ext .Msg ,alert (' 信 息 '， result .msg); 

},failure:function{}){}}), 

form.getForm() .getValuesttrue) 


) ) ; 

使 用 form.getValues (true) 时 需要 注意 的 是 , 我 们 得 到 的 字符 串 并 不 是 使 用 Ext . decode () 
编码 后 的 JSON 格 式 字 符 串 ， 而 是 name=value 的 形式 ， 无 需 处 理 就 可 以 发 送 给 后 台 。 不 过 也 出 现 
了 一 个 问题 ， 因 为 里 边 包 含 了 “=” 和 “gw 无 法 使 用 encodeURIComponent ( ) 函数 对 它 进行 编 
码 。 这 样 一 来 ， 如 果 参 数 中 包含 中 文 就 不 能 使 用 GET 发 送 数 据 了 ， 否 则 会 出 现 乱 码 ， 实 际 应 用 中 
还 需要 权衡 使 用 。 

示例 见 04.form/04-03-01.html。 


4.5 ”数据 校 验 


数据 校 验 是 非常 必要 的 , 因为 用 户 输 入 的 数据 有 时 候 是 不 可 靠 的 。 如 果 不 能 对 用 户 输入 的 数 
据 进 行 校 验 和 处 理 ， 也 许 开 发 出 来 的 应 用 根本 无 法 使 用 。 必 须 先 规定 好 各 项 数据 该 如 何 填写 ， 如 
果 输 入 错误 就 不 能 提交 到 后 台 。 关 于 这 一 点 ，IE 和 Firefox 有 些 不 同 。 如 果 校 验 失 败 ， 在 Firefox 下 
调用 submit () 是 不 会 执行 提交 的 。 但 是 ,在 IE 下 必须 先 使 用 form.isvalia() 自行 判断 ， 如 果 返 
回 false， 就 不 能 再 调用 submit () ， 否 则 仍然 会 将 非法 数据 提交 到 后 台 。 

EXT 把 验证 封装 到 了 表单 的 控件 中 ， 下 面 让 我 们 来 看 看 如 何 使 用 它们 。 


4.5.1 输入 不 能 为 空 
最 基本 的 验证 就 是 文本 框 或 其 他 控件 中 必须 输入 值 ， 如 下 面 的 代码 所 示 。 


new EXt .form.TextField(i{ 
name: 'text', 
fieldLabel: ' 文 本 框 '， 
allowBlank: false 
电 攻 ， 


allowBlank 默 认为 true， 也 就 是 说 可 以 不 输入 数 
据 , 将 它 改 成 false, 再 看 看 会 出 现 什 么 效果 , 如 图 4-12 
所 示 。 

如 果 没 有 输入 任何 数据 ， 文 本 框 下 就 会 出 现 红线 ， 
图 4-12 中 鼠标 放 上 去 出 现 提示 的 功能 需要 Ext. 图 4-12 ” 必 输 项 
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QuickTips.init() 的 支持 。 

其 实 这 种 提示 方式 比 弹 出 提示 对 话 框 更 好 用 , 也 更 容易 让 用 户 接受 。 不过, 因为 allowBlank 
不 是 在 Ext . form.Field 中 定义 的 ， 所 以 并 不 是 所 有 控件 都 可 以 使 用 它 。allowBlank 最 早出 现 
在 Ext .form.TextField 中 ， 只 有 继承 它 的 控件 才 可 以 使 用 非 空 校 验 ， 具 体 可 参考 图 4-13 中 的 继 
承 树 。 






Ext form TextField 






[4 


Ext forin.NumberField 


Extform.TriggerField 


| 


Ext form.Oaterleld™ 








Extform.ComboBox 





Extform TimerField 


图 4-13 ”支持 al11owBlank 的 组 件 继承 树 
示例 在 04.form/05-01-01.html 中 。 


4.5.2 最 大 长 度 和 最 小 长 度 


限制 输入 的 最 大 长 度 是 一 种 常见 的 校 验方 式 ， 数 据 库 只 允许 输入 255 个 字符 。 当 用 户 输入 的 
数据 超出 最 大 长 度 时 就 会 引起 错误 。 人 允许 输入 的 最 小 长 度 校 验 刚好 相反 ， 故 在 此 一 并 介绍 。 
如 下 面 的 代码 所 示 : 
new Ext.form.TextFieldl(t{ 
fieldLabel: ' 文 本 框 '， 
name: 'text', 
maxLength: 10, 
nminLength: 5 


}hs 
form 
我 们 设置 最 大 长 度 不 能 超过 10 个 字符 ， 最 小 长 度 ya [Ini |] 
不 能 少 于 5 个 字符 ， 如 果 输 入 的 字符 数量 大 于 10， 便 会 i 
出 现 图 4-14 中 的 提示 。 
示例 在 04.form/05-02-01.html 中 。 图 4-14 ”最 大 长 度 校 验 


4.5.3 借助 vtype 


EXT 提 供 了 一 套 默认 的 校 验方 案 ， 其 实 就 是 一 系列 输入 规则 和 错误 提示 。 如 果 使 用 它们 ， 就 
不 需要 再 去 背诵 那 一 长 串 正则 表达 式 ， 只 需 记 住 vtype 的 值 ， 然 后 配置 在 控件 中 即 可 ， 如 下 面 的 
代码 所 示 。 


new Ext.form.TextFieldltf 
fieldLabel: ' 文 本 框 '， 
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name: 'text'’', 
vtype: ‘email' 
}) 


这 里 我 们 给 vtype 设 置 的 是 e-mail， 限 制 text 只 能 使 用 邮箱 地 址 的 格式 ， 非 常 简 单 。 

这 些 验 证 信息 都 定义 在 Ext . form.vrypes 中 ， 默认 情况 下 ，vTypes 一 共有 4 种 验证 信息 ， 如 
下 所 述 。 

D alpha: 只 能 输入 英文 字母 。 

DQ alphanum: 只 能 输入 字母 和 数字 。 

Q email:; 电子 邮箱 。 

口 url: 网 址 。 

需要 使 用 哪 一 种 验证 信息 , 只 需要 把 vtype 设 置 成 对 应 的 值 即 可 。 当然 也 可 以 自己 进行 扩展 ， 
具体 的 方式 可 以 参照 vryvpes .js。 

示例 在 04.form/05-03-01.htmi 中 。 


4.5.4 自 定义 校 验 规则 


其 实 自 定义 校 验 规则 就 是 允许 自 定义 正则 表达 式 。 可 以 编写 一 个 regex 对 输入 数据 进行 校 
验 ， 这 样 一 来 ,无 论 是 何 种 形式 的 数据 ， 都 能 对 其 进行 判断 。 如 果 你 对 regex 不 了 解 或 没有 写 过 
正则 表达 式 ， 可 以 跳 过 本 节 ， 因 为 篇 幅 原 因 ， 这 里 不 会 讲解 如 何 使 用 正则 表达 式 。 
这 里 ， 使 用 regex 验 证 只 能 输入 汉字 的 情况 ， 如 下 面 的 代码 所 示 。 
new Ext.form.TextFieldl(t 
fieldLabel: ' 文 本 框 '， 
name: “七 EXt ' ， 
regex: /^[\u4E00-\u9FAS5]+S$/, 
regexText : ' 只 能 输入 汉字 ， 
}) 





效果 如 图 4-15 所 示 。 其 实 原理 很 简单 ， 就 是 为 regex 设 置 一 en 
个 正则 表达 式 ， 然 后 在 进行 校 验 时 会 调用 regex.test (value)。 
只 能 输入 汉字 
如 果 为 crue, 就 表示 校 验 通过 ; 如 果 为 false, 就 提示 校 验 失败 ， | 上 -1 
同时 在 提示 框 中 显示 regexText 的 内 容 。 
示例 在 04.form/05-04-01.html 中 。 图 4-15 regex 校 验 


4.5.5” 算 不 上 校 验 的 NumberField 


Ext .form.NumberField 是 Ext .form.TextField 的 子 类 , 它 本 来 应 该 继承 上 面 所 讲述 的 那 
些 验证 方式 。 但 是 ，NumberField 却 有 更 特殊 的 验证 方式 ， 所 以 在 此 单独 讲解 一 下 。 

在 NumberField 中 只 能 输入 数字 , 这 种 校 验 方式 是 其 他 控件 都 没有 的 。 其 他 控件 都 是 在 提交 
时 对 已 输入 的 数据 进行 校 验 。 NumberField 却 根本 不 让 输入 不 符合 要 求 的 数据 。 下 面 检测 一 下 这 
种 方式 的 校 验 强 度 。 

D 直接 从 键盘 输入 字母 和 非 数 字 字符 : 无 法 输入 NumberField。 
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口 尝试 输入 有 多 个 小 数 点 的 非法 数字 字符 : NumberField 只 能 限制 输入 的 字符 ， 一 旦 输入 
结束 ， 它 就 会 自动 进行 校 验 。 从 左 侧 开始 截取 ， 一 直 保留 到 合法 的 数字 格式 为 止 。 例 如 ， 
1.0.0.0 就 变 成 了 1.00。 

口 直接 把 带 有 非 数 字 的 字符 串 粘 贴 到 NumberField: 粘贴 是 成 功 了 ， 但 在 编辑 结束 后 ， 
NumberField 又 会 对 内 容 进行 校 验 ， 把 非法 数据 转化 成 最 接近 的 数字 。 

由 此 可 见 ， 不管 输入 什么 样 的 数据 ， 它 最 后 只 保留 有 效 的 数字 ， 必 须 承 认 EXT 实 在 是 考虑 得 

非常 周到 。 下 面 再 接着 讲解 与 数字 配置 相关 的 一 些 内 容 。 

口 不 想 让 用 户 输入 负数 : 将 参数 allowNegative 设 置 为 false， 于 是 用 户 不 能 再 输入 负 号 ， 
参数 的 默认 值 为 true。 

D 不 想 让 用 户 输入 小 数 : 将 参数 allowDecimals 设 置 为 false， 于 是 用 户 不 能 输入 小 数 点 ， 
参数 的 默认 值 为 Lrue。 

D 设置 小 数 精 度 : 默认 情况 下 是 保留 到 小 数 点 后 两 位 ， 即 百 分 位 。 修 改 参 数 
aecimalpPrecision 的 值 ， 决 定 精确 到 小 数 点 后 多 少 位 。 

口 minValue 和 maxValue 规 定 可 输入 数字 的 范围 : 这 是 数字 专 有 的 ， 比 如 一 个 人 的 年 龄 输入 
值 在 1 到 150 之 间 。 

不 过 ， 这 还 是 有 点 问题 ， 即 使 设置 了 allowNegative:false 和 allowDecimals:false, 也 

可 以 输入 负 号 和 小 数 点 。 虽 然 这 两 个 符号 会 在 验证 时 自动 消失 ， 但 还 是 会 让 人 觉得 难以 接受 。 
maskRe 参 数 的 用 途 和 NumberField 一 样 ， 都 可 以 实现 禁止 用 户 输入 不 符合 标准 的 数据 。 

如 果 使 naskRe 等 于 /\G/， 它 也 是 指向 了 一 个 正则 表达 式 ， 把 它 放 入 NumberFiela 里 就 可 以 

阻止 符号 和 小 数 点 ， 以 上 的 几 种 校 验方 式 如 下 面 代码 所 示 : 


items: [{ 
fielduabel: ' 数 字 '， 
name: ‘text'’, 
xtype: ‘numberfield', 
allowNegative: false, 





allowDecimals: false, 
decimalPrecision: 4, 
minValue: 0, 
maxValue: 150, 
maskRe: /\d/ 

}] 


示例 在 04.form/05-05-01.html 中 。 
4.5.6 ”使 用 后 台 返 回 的 校 验 信息 


这 里 用 到 的 就 是 前 面 说 的 第 一 种 提交 方式 , 在 返回 的 响应 中 可 以 包含 校 验 失败 的 信息 。 只 要 
你 写 对 了 地 方 ， 表 单 就 会 自己 处 理 它们 ， 还 会 把 它们 放 在 正确 的 地 方 ， 如 代码 清单 4-3 所 示 。 


代码 清单 4-3， 使 用 后 台 返 回 的 校 验 信息 


items: [({ 
fieldLabel : ' 文 字 一 '， 
name: 'textl!: 
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fieldLabel: ' 文 字 二 '， 
name: 'text2"' 


text: ' 按 钮 '， 
handler: function() {1 
form.getForm() ,Submit ({ 
success:function{form, action)t{ 
Ext .Msg .alert {' 信 息 '，action.result.msg}); 
}; 
failure:function(form, action})t{ 
if (action.failureType == Ext.form.Action.SERVER_ INVALID) { 
Ext .Msg .alert (' 错 误 '，' 后 台 校 验 失 败 '); 
} else { 


Ext .Msg .alert (' 错 误 '，' 无 法 访问 后 台 ' ) ; 


}]) 


上 面 的 表单 中 有 两 个 文本 框 : text1 和 text2。 

为 了 配合 后 台 校 验 ， 我 们 在 submit 的 回调 函数 failure() 中 做 了 点 儿 工 作 ， 通 过 action 的 
failureType 来 判断 响应 失败 是 因为 校 验 失败 还 是 因为 进行 HTTP 连 接 时 发 生 了 错误 。 从 这 里 我 
们 可 以 了 解 表单 中 的 提交 与 普通 Ajax 的 区 别 ， 普 通 Ajax 的 failure() 回 调 函数 只 在 发 生 HTTP 连 
接 错 误 时 才 会 执行 ,而 表单 的 failure() 回 调 函数 可 以 处 理 包括 连接 错误 和 后 台 业 务 错误 在 内 的 
两 种 情况 。 

现在 我 们 看 看 校 验 失败 时 后 台 响 应 的 信息 : 


{success:false,errors: {text1i:' 有 问题 一 ' ,text2:' 有 问题 二 ' }} 
响应 中 的 success: false 表 示 后 台 业 务 失 败 , failure() 回 调 。 om 
函数 会 在 出 现 success :false 时 执行 。 i 
实现 后 台数 据 校 验 的 关键 部 位 在 errors 上 ， 它 对 应 的 是 一 个 。 3= CT 
JSON 对 象 ， 里 边 包 含 的 就 是 错误 信息 ， 其 中 的 kext1 和 text2 分 别 
对 应 了 表单 中 两 个 文本 框 的 校 验 信息 。 表单 会 自动 将 校 验 信息 与 对 


应 的 文本 框 结合 起 来 ， 最 后 在 页 面 中 显示 的 结果 如 图 4-16 所 示 。 图 4-16 后 台 校 验 信息 
示例 在 04.form/05-06-01.html 中 。 

4.6 ”表单 布局 和 
对 表单 来 说 ， 布 局 也 是 比较 重要 的 一 部 分 ， 表 单 是 用 来 录入 数 ”名字 

据 的 。 通 常 我 们 都 会 采用 各 种 布局 让 表单 元 素 和 表单 搭配 得 更 整 访 钥 

洁 、 更 美观 ， 如 图 4-17 所 示 。 下 面 我 们 来 讨论 一 下 有 关 表 单 的 布局 

问题 。 图 4-17 ”默认 布局 
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4.6.1 默认 的 平 铺 布 局 


如 果 不 进行 任何 设置 ,而 是 直接 把 控件 加 入 表单 中 ,使 用 的 就 是 自 上 而 下 的 默认 布局 ( 见 图 
4-17)。 控 件 部 分 的 实现 代码 如 下 所 示 : 


di ' 俩 字 '}， 
{fieldLabel: ' 三 个 字 '}， 
{fieldLabel : “四 个 汉字 '} 
]， 
表单 的 默认 布局 的 优点 是 简便 和 无 需 额外 配置 ， 直接 使 用 默认 布局 也 能 满足 大 多 数 要 求 , 我 
们 下 面 再 来 看 看 与 其 相关 的 其 他 样式 配置 。 
你 注意 到 了 这 3 个 输入 框 〈 见 图 4-17) 的 标签 文字 长 度 有 所 不 同 了 吗 ? 表单 中 的 标签 默认 使 
用 左 对 齐 的 方式 ， 一 共有 1left、top、right3 个 值 可 以 选 ， 我 们 可 以 通过 配置 labelAlign: 
'right ' 使 标签 右 对 齐 。 标 签 文字 的 宽度 也 可 以 设置 ， 我 们 这 里 使 用 labelwidth: 60， 宽 度 就 
是 60 像 素 。 如 果 标 签 宽度 过 长 ， 文 字 会 自动 换行 。 按 钮 的 位 置 也 可 以 设置 ， 有 1eft、center、 
right3 种 选择 ， 默 认 是 zight ( 右 对 齐 )。 代 码 如 下 所 示 : 





form 
defaultType: 'textfield', 
labelAlign: "上 ight '， 例 字 - 
title: ‘form', 三 个 他: 


labelWidth: 60, 由 个 汉 

假设 我 们 设置 了 labelalign: 'left'、labelwidth: 40 和 
buttonAlign: 'right', 表单 的 显示 效果 如 图 4-18 所 示 。 

示例 在 04.form/06-01-01.html 和 06-01-02.html 中 。 图 4-18 ”设置 标签 宽度 
4.6.2 平行 分 列 布局 

在 图 4-19 中 ， 表 单 中 的 文本 框 被 分 为 3 列 显示 。 


forin 


该 钥 


伴 字 二 个 学 : 四 个 汉字 : 


校 链 


图 4-19 ”平行 分 列 布局 


我 们 先 使 用 1ayout : 'column' 来 说 明 下 面 要 使 用 的 是 列 布 局 ， 然 后 在 items 指 定 的 每 列 中 
使 用 columnwidth 指 定 每 列 所 占 总 宽度 的 百分比 。 

要 注意 一 点 ， 如 果 使 用 了 分 列 布局 ， 就 不 能 在 表单 中 直接 使 用 defaultType 指 定 默 认 的 
xtype 了 ， 否 则 会 影响 布局 结果 。 每 一 列 中 也 必须 手动 指定 使 用 layout : 'form'， 这 样 才 能 在 
每 列 中 正常 显示 输入 框 和 对 应 标签 。 顺 便 说 一 下 ，1layout : 'form' 其 实 就 是 FormPane1 默 认 使 
用 的 布局 方式 ， 即 自 上 而 下 依次 排列 〈 见 代码 清单 4-4)。 
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代码 清单 4-# 分 列 布局 


var form = new Ext,form,.FormPpanell(t 
LabelAlign: ‘'right', 
labelwidth: 60, 
tatEB: Tort., 
frame:true, 
width: 650, 
url: '04_01_01.jsp', 


items: {{ 
layout: 'column’, 
items: [1{ 


columnWwidth: .33, 
layout: ‘form', 
items:[{xtype: 'textfield',fieldLabel: ' 俩 字 '}] 


columnWidth: .33, 
layout: ' form' ， 
items: [{Xtype: 'textfield' ,fieldLabel: ' 三 个 字 '] ] 


columnWidth:; .33， 
layout: ‘form', 
items:[{xtype: 'textfield',fieidLabel: ' 由 个 汉字 ']}] 
二 
Eke 
buttons: [{ 
text: ' 按 钮 '， 
handler: function() ({ 
form.getForm{) .submit(); 
} 
EF 
})? 


这 里 从 最 顶级 分 成 3 列 ， 每 列 占 总 宽度 的 1/3。 每 列 都 使 用 表单 布局 ， 每 列 都 只 包含 一 个 
TextField， 这 就 完成 了 我 们 上 面 看 到 的 3 列 布局 了 。 

示例 在 04.form/06-02-01.html 中 。 

如 果 在 每 列 中 放 多 个 输入 框 〈 见 图 4-20)， 只 需 将 上 面 例子 中 fielarabel 增 加 到 多 个 即 可 ， 
修改 之 后 代码 如 下 : 


items: [1 
layout: 'column', 
items: [{ 
columWwidth: .33, 
layout: ‘form', 
defaultType: 'textfield', 
items:[ 
{fieldLabel: ' 俩 字 '}， 
{fieldLabel:; ' 俩 字 '} 
] 
下 
columWidth: .33, 
layout: 'form', 
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defaultType: 'textfield', 
items:[ 
{fieldLabel: “三 个 字 '}， 
{fieldLabel: ' 三 个 字 '}， 
{fieldLabel: ' 三 个 字 '} 
] 


CoLurmnwWidth: .33, 

layout: 'form', 

defaultType: 'textfield', 

items:[ 
{fieidLabel: + 四 个 汉字 ' )， 
fieldLabel: "四 个 汉字 ' ) ， 
{fieldLabel: "四 个 汉字 ' )， 
{fieldLabel: ' 由 个 汉字 '} 





}] ， 


form 
鱼子 三 个 学 ; 加 个 汉字 
全 字 三 个 字 ， 四 个 汉字 
三 个 字 加 个 议 闻 ; 
罗 个 汉字 
该 包 


图 4-20 ”分 列 布局 : 每 列 中 放 入 多 个 输入 框 


示例 在 04.form/06-02-02.html 中 。 
下 面 介 绍 分 列 布局 与 默认 布局 相 结 合 的 情况 ， 图 4-21 中 的 效果 就 是 在 整体 上 使 用 了 默认 布 
局 ， 在 上 部 使 用 了 分 列 布局 。 


form 
俩 字 : 三 个 字 : 
全 字 : 三 个 字 : 
= 
熙 个 汉字 


结 馆 


图 4-21 分 列 布局 与 默认 布局 相 结 合 


这 里 不 必 使 用 CSS 中 的 clear:true 指 定 换 行 ， 在 layout: 'column' 下 直接 放 一 个 
textarea 即 可 。 综 合 运 用 表单 布局 和 分 列 布局 ， 可 以 实现 各 种 复杂 的 布局 效果 (如 代码 清单 4-5 
所 示 )。 
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代码 清单 4-5 ”综合 运用 表单 布局 和 分 列 布局 实现 复杂 的 布局 效果 


items: [({ 
layout: 'column', 
items: [{ 


columnWidth:.5, 
layout: ‘form', 
defaultType: 'textfield', 
items:[ 
{fieldLabel: ' 俩 字 '}， 
{fieldLabel: ' 俩 字 '} 
] 


columnWidth: .5, 
layout: 'form', 
defaultType: ‘'textfield', 


items:[ 
{fieldLabel: ' 三 个 字 ')， 
{fieldLabel: ' 三 个 字 '}， 
{fieldLabel: ‘三 个 字 '} 
] 
}] 
jv. 
width: 345, 
height: 100, 


xtype: ‘textarea', 
fieldLabel: ' 四 个 汉字 ， 
)] ， 


示例 就 在 04.fornv06-02-03.html 中 。 


4.6.3 在 布局 中 使 用 fieldaset 


在 标准 HTML 中 ， 需 要 把 输入 项 都 放 到 fielaset 中 ， 以 此 来 显示 分 组 结构 。 虽 然 EXT 中 的 
表单 已 经 很 漂亮 了 ， 但 我 们 依然 可 以 用 fieldset 来 进行 内 部 分 组 。 

为 了 突出 显示 效果 ， 这 里 我 们 把 columnmn 和 fieldset (fieldset 只 是 一 个 普通 的 xtype) 结 
合 在 一 起 使 用 〈 见 代码 清单 4-6)。 


代码 清单 4-6 ”使 用 fieldaset 


items: [{ 
layout: ‘column', 
items: I[{ 


columnWidth:;.5, 
layout: 'form', 
xtype: ‘fieldset', 
title: ' 俩 字 '， 
autoHeight: true, 
defaultType: ‘textfield', 
items:[ 
{fieldLabel: ' 俩 字 '}， 
{fieldLabel: ' 俩 字 '} 
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columnWidth:.5, 

layout: 'form', 

xtype: 'fieldset', 

titlie: ' 三 个 字 '，, 

autoHeight: trvue, 

style: ‘margin-left: 20px;', 
defaultType: 'textfield', 
items: [ 


{fieldLabei: :三 个 字 ' ) ， 
{EielaLabel: ' 二 个 字 '}， 
{fieldLabel: ' 三 个 字 '】 





} ] 


xtype: 'fieldset', 
title: ' 四 个 汉字 '， 
autoHeight: true, 
items: [{ 
width: 345, 
height: 100, 
xtype: 'textarea', 
fieldLabel: ' 四 个 汉字 ， 
}] 
oly 


注意 加 上 标题 title 并 设置 autoHeight :true， 让 fieldset 看 起 来 更 漂亮 一 些 。sty1le: 
margin-left: 20px; ' 则 是 我 们 直接 设置 的 CSS 样 式 ， 这 是 为 了 使 第 二 列 和 第 一 列 不 会 靠 得 太 
近 ， 最 后 的 效果 如 图 4-22 所 示 。 


form 
秽 冰 三 省 事 
傅 宇 ; 三 个 字 ; 
例 字 : EY 
三 个 字 ; 
罗 个 汉 六 
四 个 汉字 : 


续 乌 


图 4-22 在 布局 中 使 用 fieldset 


不 用 去 记忆 大 量 的 复杂 函数 的 用 法 ， 但 仍然 可 以 使 用 EXT 提供 的 布局 功能 实现 漂亮 的 效果 。 
示例 在 04.form/06-03-01.html 中 。 
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4.6.4 ”在 fieldset 中 使 用 布局 


直接 在 表单 里 使 用 分 列 布局 很 简单 ， 相 信和 熟悉 EXT 的 读者 都 会 使 用 。 然 而 ， 却 有 不 少 读者 不 
会 在 fieldset 中 使 用 分 列 布 局 ， 包 括 一 些 对 EXT 比 较 熟 悉 的 读者 。 如 果 按 照 使 用 表单 的 方法 来 
使 用 它 ， 可 能 会 看 不 到 fielaLabel 的 值 ， 需 要 经 过 多 次 调试 才能 成 功 〈 见 代码 清单 4-7)。 


代码 清单 本 7 在 fielaset 中 和 使 用 分 列 布局 


set = new Ext.form,.FieldSet!(t{ 
title: 'fieldset', 
//width:400, 
height :80, 
columnWidth: 1, 
layout: 'column', 
border: true, 
anchor: '100%', 
labelWidth: 40, 
items:[t 
columnwidth: .4， 
layout: 'form', 
border:false, 
items: [{{ 
xtype: 'textfield', 
fieldLabel: 'aaaaa', 
name: ‘'aaa’, 
anchor: ‘'95%"' 
}] 


column width:.4, 
layout: ‘form', 
border:false, 
items: [{ 
xtype: 'textfield', 
fieldLabel: ‘bbbbb', 
name: 'bbb', 
anchor: '95%'" 
}] 


column Width:.2, 
layout:; ‘form', 
border: false, 


items: [{ 
xtype: 'button', 
text : ' 查 询 ' ， 


iconCls: ‘query', 
handler: function(}t 
Ext .Msg.alert('sss','aaa'); 
} ， 
scope: this 
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}] 
i 
}); 
setform = new Ext.form.FormPpanelt{t{ 
height: 80, 
border: false, 
labelWiadth:80, 
labelAlign: 'right', 
frame:true, 
items: [set] 





win = new Ext .Window!(t 
title: "FieldSet 的 column 布 局 ' ， 
Lavoubs ”fit 
width:500, 
height:300, 
closeAction:'hide', 
items: [setform] 

EY 


win.show!(); 


这 样 就 实现 了 fieldset 的 分 列 布 局 ， 效 果 如 图 4-23 所 示 。 


Fieldset 的 colunnn 奋 局 Xx 
fieldset 


dj: Name:; ouery 


图 4-23 在 fieldset 中 使 用 分 列 布局 





说 明 表格 布局 的 字体 与 其 他 布局 的 字体 不 同 ， 还 需要 使 用 CSS 控 制 字体 。 分 列 ( column ) 布局 
与 表格 ( table ) 布局 都 可 以 实现 横向 按 列 布局 ， 具 体 使 用 时 要 看 个 人 喜好 和 习惯 了 。 





示例 在 04.form/06-04-01.html 中 。 


4.6.5 自 定义 布局 

下 面 我 们 看 看 如 何 向 表单 中 添加 不 属于 Ext . form.Fiel6 子 类 的 控件 ， 比 如 图 片 和 文字 之 类 
的 静态 内 容 。 

因为 Ext . form.FormPane1 继 承 自 Ext .Panel, 所 以 可 以 使 用 1ayout 和 items 提 供 各 种 内 部 
布局 形式 。 除 了 Ext . form.Field 之 类 的 输入 控件 外 ， 还 可 以 使 用 其 他 Panel 来 装饰 表单 。 这 里 
我 们 就 使 用 xtype:'panel' 好 了 ， 在 它 里 边 使 用 img 来 显示 图 片 ( 见 代码 清单 4-8)。 
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代码 清单 4-8 ”在 表单 内 使 用 BXE:Earmel 


{ 
Columnwidth: .5， 
layout: 'Eorm'， 
xtype: 'fieldaset '， 
“itle: ' 三 个 字 '， 
autoHeight: true, 
style: 'margin-left: 20px;', 
defaultType: 'textfield', 


items:[ 
{fieldLabel:; ' 三 个 字 ']】， 
{fieldLabel: ' 三 个 字 ' ] ， 
{fieldLabel: ' 三 个 字 '}， 


{xtype: 'panel',html: ‘<center><img src="user_female.png" /></center>'} 


} 


运行 效果 如 图 4-24 所 示 。 
form 
铜 闻 三 十字 
俩 字 : 三 个 字 : 
俩 字 三 个 他: 
三 个 字 : 
县 
加 个 汉 半 
四 个 汉字 ; 


搞 钮 -| 


图 4-24 ”向 Ext .form.FormpPanel 中 添加 Ext .Panel 
表单 的 完整 代码 如 下 所 示 : 


Var form = new Ext.form,.FormPanellt 
labeliAlign: 'right', 
labelWidth; 60, 
title: 'form'’, 
frame:true, 
width: 450, 

UPLs TEOrMYISD.S 


items: [ti 
layout: 'column', 


Download at Pin5i.Com 


http://52pdf.taobao.com 


4.7 ComboBox 详解 121 


items: [{ 

colurmWidth: .5， 

layout: 'form'’', 

xtype: 'fieldset', 

title: ' 俩 字 '， 

autoHeight: true, 

defaultType: 'textfield', 

items:[ 
{fieldLabel: ' 俩 字 ')， 
{fieldbLabel: ' 俩 字 ') 

] 

| 

columnWidth: .5, 

layout:; “form' ， 

xtype: 'fieldset', 

title: :三 个 字 ' ， 

autoHeight: true, 

style: 'margin-left: 20px;', 

defaultType: 'textfield', 

items:[ 
{tfieldLabel: ' 三 个 字 ' ) ， 
{fieldLabel: ' 三 个 字 ')， 
{fieldLabel: ' 三 个 字 '}，, 
{xtype: 'panel',html: '<center><img src="user female.png" /></Ccenter>') 





kl 
) 1{ 
xtype: fieldset '， 
title: ' 四 个 汉字 '， 
autoHeight: true, 
items: [{ 
width: 345, 
height: 100, 
xtype: ‘textarea', 
fieldLabel: ' 四 个 汉字 ， 
}] 
Fs 
buttons: [1{ 
text: ' 按 钮 '， 
handler: function() { 
form.getForm() .submit(}); 


}] 
TD 


示例 在 04.form/06-05-01.html 中 。 


4.7 ComboBox 详解 
EXT 中 提供 的 ComboBox 与 HTML 中 原 有 的 Select 无 任何 关系 ， 它 完全 是 用 div 重 写 的 。 
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4.7.1 ComboBox 简介 


耳 听 为 庶 ， 眼 见 为 实 ， 先 看 看 所 谓 的 ComboBox 究 竟 是 个 什么 模 
样 〈 见 图 4-25 )。 

是 不 是 觉得 它 比 原生 的 Select 更 漂亮 ? 下 面 我 们 来 看 看 如 何 制作 
ComboBox 〈 见 代码 清单 4-9 )。 图 4-25 ComboBox 


代码 清单 4-9 ”实现 ComboBox 


Var data = [ 
‘valuel','textl1'}, 
['value2','text2'], 
['valuell', ‘text11'], 
[Cryvalueld". "textt2*] 





text12 


一 


Var store = new EXL.dGata.SimpleStoreft 
fieldqs: ['value', ‘text'], 
Gata : data 


Var combo = new Ext.form.ComboBox!t{ 
store: store, 
emptyText : ' 请 选择 '， 
mode: 'local', 
triggerAction: 'gquery', 
valueField: 'value', 
displayField: 'text', 

applyTo: 'combo', 

Value: ‘textl1’ 

二 


首先 ， 定 义 ComboBox 中 将 要 显示 的 数据 ， 我 们 这 里 使 用 的 是 二 维 数 组 aata。 

其 次 ， 将 这 个 二 维 数 组 交 给 Ext .data.simplestore。 Ext .data.SimpleStore 的 功能 与 
Ext .data.Store 相 近 ， 而 Ext .data. SimpleStore 不 必定 义 proxy 和 reader 就 可 以 直接 使 用 数 
组 ， 使 用 起 来 更 加 方便 。 

最 后 ， 调 用 applyTo('combo' ) 把 ComboBox 画 到 页 面 上 。 需要 注意 的 是 ，ia= "combo" 对 应 
的 必须 是 <input id="combo" type="text" />， 不 能 在 DTv 标 签 上 泻 染 comBox。 

下 面 我 们 来 看 看 Ext . form.ComboBox 中 用 到 的 参数 ， 如 下 所 示 。 

口 store: 用 来 为 ComboBox 提 供 数据 ， 原始 数据 是 一 个 二 维 数组 , 将 数组 放 入 Simplestore 

之 后 ， 第 一 列 对 应 属性 名 为 value， 第 二 列 对 应 属性 名 为 Lext 。 
D 现在 可 以 看 到 另外 两 个 参数 : valueField 和 displayField,。 
为 什么 它们 的 值 与 store 中 定义 的 两 个 名 字 一 样 呢 ? 它们 之 间 有 何 关系 ? 
果然 ，ComboBox 正 是 根据 它们 之 间 的 对 应 关系 来 显示 数据 的 。 
单 击 ComboBox, 弹出 的 列表 里 就 是 simplestore 中 text 列 对 应 的 数据 ,。 而 当 你 选中 某 个 
数据 时 ，ComboBox 的 值 就 被 自动 设置 成 simplestore 中 被 选中 那 一 行 对 应 的 value 值 ， 


Download at Pin5i.Com 


http://52pdf.taobao.com 


4.7 ComboBox 详解 123 


于 是 数据 就 关联 在 一 起 了 。 
Q emptyText 很 好 理解 ， 即 没有 选择 任何 数据 时 ComboBox 里 显示 的 提示 信息 。 
D mode 设 置 成 local， 这 也 就 告诉 ComboBox， 它 需要 的 数据 已 经 读 取 到 本 地 了 ， 不 需要 青 
去 后 台 读 取 了 。 
D triggeraction 设 置 成 al1l， 如 果 用 默认 的 auery， 它 会 使 用 autocomplete 功 能 ， 
autocomplete 的 使 用 会 在 后 面 详细 介绍 。 
口 value 可 以 为 ComboBox 设 置 默 认 值 。 text1 w 
如 果 你 不 了 解 autocomplete， 可 以 参考 图 4-26 中 的 效果 。 ee- 人 
autocomplete 就 像 下 面 这 样 ， 会 根据 输入 的 信息 自动 从 结果 人 
中 选择 匹配 的 信息 进行 显示 。 
有 没有 发 现 text2 不 见 了 ? autocomplete 会 根据 输入 的 图 4-26 ”自动 匹配 
text1 将 不 匹配 的 结果 过 滤 掉 。 如 果 想 让 ComboBox 每 次 都 显示 所 有 可 选 数据 ， 那 么 把 
triggerAction: 'query ' 换 成 triggerAction: 'all' 即 可 。 
示例 在 04.form/07-01-01 中 。 


4.7.2 将 Select 转换 成 ComboBox 
这 种 创建 ComboBox 的 方式 要 求 HTML 里 必须 先 包含 一 个 Select 下 拉 框 ， 如 下 面 的 代码 所 示 。 


<select id="combo"> 
<option value="valuel">textl</option> 
<option value="value2">text2</0option> 
<option value="valuell">text11l</option> 
<option value="valuel2">texti2</option> 
</sSelect> 


我 们 在 这 个 Select 的 基础 上 构造 ComboBox， 使 用 Select 里 包含 的 数据 ， 如 下 面 的 代码 所 示 。 


Var combo = new Ext .form,ComboBox (({ 
emptyText : ' 请 选择 '， 
mode: 'local', 
triggerAction: 'all', 
transform: 'combo'" 
}); 
这 里 的 代码 明显 比 上 面 的 不 通过 Select 而 直接 创建 ComboBox 的 代码 少 了 很 多 ， 关 键 在 于 
transform: 'combo' 参数, 它 告诉 EXT 把 指定 的 Select 中 的 数据 逐条 抽取 出 来 , 添加 到 ComboBox 
里 ， 最 后 把 Select 完 全 替换 成 ComboBox。 


示例 在 04.form/07-02-01.html 中 。 


4.7.3 ”ComboBox 结构 详解 


首先 ， 用 Firebug 查 看 一 下 生成 后 的 HTML ( 见 图 4-27)， 这 可 以 更 容易 明白 ComboBox 的 绚丽 
外 表 下 隐藏 着 的 内 容 。 
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区 <div id-"ext-gen?” class= xz-form-field-wrap” strle= width: 14dpx:."> 
《input id="combo” class= zx-form-text z-form-fiald 
z-form-empt7r~field"” type="text” autocomplete="off"/> 
《imE id= ”ext~Een8S” class="z-form-trigeer 
zr-form-arrow trigger” src=”../../resources/images/ defaulit/s, gif”/> 
</ div> 
[3 <div id-"erzt-genl3"” class="x-laryer x-combo-list” st7le=*position- absolute: z-index 
11000; wisibilitry: hidden; lef+: -~iQNNNpe; top: -1000b0pxz: wadtk 142nz:"> 


3 xaiv id=" 
<div 
<div 
《div 
<div 


ext-Eeni5” class="z-combo-list-inner” stryle="width: 142pxz.“> 
class= x-combo-list-item”> texzt1 </div> 
class="z-combo-list-item"> tezt2</div> 
class="z-combo-list-item” > text11 </div> 
class=" x-combo-list-item"> tezt12</div> 


<f div> 
fdiv> 





图 4-27 ”ComboBox 对 应 的 DOM 代 码 


原来 就 是 用 div 包 里 了 一 个 input 和 img。 单 击 显 示 出 来 的 列表 也 是 用 div 制 作出 来 的 。 平 时 
它 会 隐藏 起 来 ， 当 用 户 选 择 时 才 显 示 到 对 应 的 input 下面 ， 原 来 ComboBox 就 是 这 么 简单 。 

实际 上 ，ComboBox 还 有 另外 一 种 特性 ， 我 们 只 需要 为 它 加 上 一 个 hiddenName 属 性 。 注 意 ， 
这 里 的 hiddenName 不 能 和 ComboBox 的 id 重 复 , 这 样 生成 的 ComboBox 从 外 表 上 看 不 出 有 什么 变 
化 ， 但 Firebug 会 将 它 的 内 在 变化 完全 展示 出 来 ， 如 下 面 的 代码 所 示 。 


Var combo new Ext.form.ComboBoxt{{ 
store: store, 
emptyText : ' 请 选择 '， 
mode: 'local', 
triggerAction: '‘'query', 
valueField: ‘'value', 
displayField: '‘'text', 
hiddenName: 'comboId' 


天 


看 到 了 吧 ? 在 最 后 一 个 参数 中 ， 我 们 将 hiadenName 设 置 为 'comboId'( 见 图 4-28)， 不 让 它 
和 div 中 的 1G="combo" 重 复 。 


= 《div id-"ezt-gen?” class="x-form-field-wrap” style="width: 144px."> 


Sinput id combo” class=" xz-form~tezt zs-form-field 


zform-emptr-field” type= texzt” autocomplete="off”"/»> 


<imE id- ext~geng" class= zx-form-irigeer 
” form-ar Pt Yi EEer” src=" 
</ div> 


{Yesources/ imees/ derfault/s. gif /> 





图 4-28 hiddenName 


从 Firebug 展 示 的 DOM 树 中 你 又 看 到 了 什么 ? 用 蓝 色 标记 出 的 这 一 行 〈 第 2 行 ) 就 是 使 用 
hiddenName 的 结果 。 这 让 ComboBox 又 增加 了 一 个 type="hidaen" 的 input ， 而 <input 
type="hidden"> 隐 藏 域 的 id 和 name 都 为 comboIda (实际 上 ， 你 也 可 以 分 别 设置 它 的 ia 和 name， 
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用 hiadenIg 和 hiddenName 指 定 )。 

<input type="hiddqen"> 隐 藏 域 的 value 会 随 着 你 的 选择 而 改变 ， 它 的 值 一 直 等 于 选中 部 
分 对 应 的 value。 

EXT 之 所 以 为 ComboBox 生 成 如 此 复杂 的 DOM 结 构 ， 主 要 还 是 为 了 模拟 HTML 中 的 原生 
SELECT 控件 。 在 原生 SELECT 控件 中 ， 我 们 可 以 为 value 和 text 设 置 不 同 的 值 ， 用 户 选择 的 是 
text， 而 向 后 台 提 交 的 数据 则 是 text 对 应 的 value。 如 果 没 有 为 ComboBox 设 置 hiddenName， 
ComboBox 提 交 的 永远 都 是 用 户 看 到 的 text 。 通 过 使 用 hiadaenName, 我 们 才 可 以 向 后 台 提 交 text 
对 应 的 value 的 值 。 


4.7.4 ”ComboBox 读 取 远程 数据 4 


使 用 远程 数据 其 实 非 常 简 单 。 之 前 我 们 使 用 Ext .data.simpleStore 从 本 地 数组 中 获得 数 
据 ， 这 次 模仿 表格 的 方式 ， 用 Ext .Gata .store 配 合 proxy 和 reader 获 得 从 后 台 返 回 的 数据 ， 如 
下 面 的 代码 所 示 。 


Var store = new Ext.data.sStorel(t 
Droxy: new Ext.data.HttpProxy{{url:'07-04-01.txt'}}, 
reader: new Ext.data.ArrayReader{{}, I 
{name:; ‘value'}, 
{name: 'text'} 
] ) 
记忆 


我 们 使 用 HttpProxy 访 问 07-04-01.txt, 并 使 用 ArrayReader 把 获得 的 数据 分 成 value 和 text 
两 列 ，07-04-01.txt 的 内 容 如 下 所 示 。 


| 

各 
'valuell','text1l1'], 
"voaluinlll etextlilL"]s 

J - 扩  - 加 区 了 隐 时 记 尖 下 以 -2 咱 且 革 剖 避 议 著 
'valuell1l111','text11111'], 
VALUS2 .tert2.]; 
yalue2o Ftext22.]， 
ryvaluez22', "text222"]., 
‘value2222','text2222'], 
‘value22222','text222221!] 


Co Es Ee 盖 一 人 一 rm 


] 


现在 可 以 更 新 页 面 了 。 但 是 ， 为 什么 单 击 并 选择 后 却 没 有 显示 数据 呢 ? 再 次 单 击 ， 还 是 没 数 
据 。 不 要 着 急 ， 我 们 还 需要 配置 一 些 参数 。 

我 们 需要 把 ComboBox 的 mode 参 数 从 local 改 成 remote, 实际 上 mode 的 默认 值 就 是 remote， 
如 下 面 的 代码 所 示 。 


var combo = new Ext,form.ComboBox{{ 
store: store, 
emptyText : ' 请 选择 '， 
mode: 'remote', 
triggerAction: 'all'!', 
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valueField: 'value'， 
displayField: 'text' 
Fy 


除了 mode 改 成 remote 了 以 外 ， 其 他 地 方 无 需 更 改 。 
也 有 不 修改 mode:remote 的 方法 ， 在 创建 ComboBox 后 手动 运行 store.1lo0ad() 即 可 ( 见 代 


码 清 单 4-10)。 
代码 清单 4-10 ”远程 加 载 数据 


Var store = new Ext .data.SsStorelt 
proxy: new Ext.data.HttpProxy ({url:'07-04-01 .txt'}), 
reader: new Ext.data.ArrayReader ({}, [I 
{name: 'value'}, 
{name: 'text'} 
] ) 
})3 
store.load!(); 
Var combo = new Ext .form.ComboBoxt{1 
store: store, 
emptyText : ' 选 择 '， 
mode: 'local', 
triggerAction: 'all', 
valueField: 'value'， 
displayField: 'text' 
})3 


这 种 方法 与 上 面 的 方法 的 不 同 之 处 在 于 ， 你 可 以 决定 何 时 对 ComboBox 的 数据 进行 初始 化 ， 
如 果 不 手 工 运行 store.1oad()， 会 在 第 一 次 单 击 “ 选 择 ” 按 钮 时 读 取 数据 。 这 两 种 方法 的 最 终 
效果 是 一 样 的 。 

有 一 点 要 特别 注意 ， 如 果 mode 设 置 为 remote， 又 使 用 了 store.1oad()，store 就 会 读 取 两 
次 数据 ， 执 行 store.1oad() 时 一 次 ， 单 击 “ 选 择 ” 时 一 次 。 

示例 在 04.form/07-04-01.html 中 。 


4.7.5 ”ComboBox 的 高 级 配置 
ComboBox 的 高 级 配置 如 下 。 





口 为 ComboBox 添 加 分 页 功能 〈 见 图 4-29)。 
实际 上 只 添加 了 两 个 参数 ， 如 下 面 的 代码 所 示 。 


Var combo = new Ext .form.ComboBox1({ 


textil 
texti11 
text1111 
text11111 


store: store, text2 
emptyText : ' 请 选择 '， text22 

mode: 'remote', text222 

triggerAction:; 'all', text2222 

valiueField: 'value'， text22222 
displayField: '‘'text', Pogel! efieiep ,MM 
minListWidth: 220, 1 
pageSize: 5 图 4-29 分 页 


小 
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pageSize 是 主要 参数 ， 它 决定 每 次 显示 多 少 条 记录 ，EXT 内 部 自动 计算 是 否 进行 分 页 。 

minListwidth 用 来 控制 下 拉 列 表 的 宽度 ， 如 果 不 设置 它 ， 也 许 就 看 不 到 完整 的 分 页 条 。 
还 有 一 点 要 注意 ， 参 数 mode 的 值 必须 是 'remote' 。 如 果 写 成 local,， 分 页 条 就 无 法 使 用 ， 
因为 分 页 的 前 提 是 先 到 store 中 分 批 获取 数据 。 如 果 数 据 都 已 经 保存 到 本 地 ， 就 不 需要 执 
行 分 页 操作 了 。 

满足 了 上 述 条 件 之 后 ,我 们 就 获得 了 一 个 闪 亮 的 分 页 条 , 现在 可 以 使 用 它 分 页 查看 数据 了 。 
通过 拖 放 改变 弹出 列表 的 大 小 。 

如 果 构 造 ComboBox 时 加 上 参数 resizable:true， 就 可 以 对 弹出 列表 进行 拖 放 ， 从 而 修 
改 列表 的 大 小 ， 如 下 面 的 代码 所 示 。 


Var combo = new Ext .form.ComboBox!tf 
store:; store, 
emptyText : ' 请 选择 '， 
mode: ‘remote'!, 
triggerAaAction: '‘'all'!', 
valueField: ‘value', 
displayField: 'text', 
minListwidth: 220, 
pageSize: 5, 


DO 





resizable: true lv 

})3 ‘textl : <| 

具体 效果 如 图 4-30 所 示 ， 注 意 下 拉 列 表 右 下 角 的 拖 :text11 2 | 

放 标 志 ， 把 鼠标 放 到 上 面 就 可 以 执行 拖 放 操作 。 ee : | 
口 是 否 允 许 用 户 自己 填写 内 容 。 PL : 

不 知道 你 是 否 发 现 ComboBox 与 原生 的 Select 之 间 :text2 I 

有 一 个 很 大 的 区 别 。ComboBox 可 以 让 用 户 自由 填 。 ;textz2 

写 数据 。 通 过 对 ComboBox 内 部 的 分 析 可 以 看 出 ， ie | 

显示 框 只 是 一 个 type="text" 的 input 输 入 框 。 当 ad iz| 

然 ， 它 是 允许 用 户 输入 的 ， 但 这 可 能 不 是 我 们 想 要 1 page 1 


的 效果 。 如 何 才 能 实现 与 原生 Select 一 样 的 只 能 选择 
不 可 修改 的 效果 呢 ? 


lot2: 由， 起 


Tr 


我 们 需要 的 只 是 一 个 readonly 参 数 , 如 下 面 的 代码 ”图 4-30 通过 拖 放 改变 弹出 列表 的 大 小 


所 示 。 


Var combo = new Ext.form.ComboBox{{ 
store: store, 
emptyText : ' 请 选择 '， 
mode: 'remote', 
triggerAction: 'all', 
valueField: ‘value', 
displayField: 'text', 
minbistWidth: 220, 
pageSize; 5, 
resizable: true， 
readOnly: true 
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这 样 用 户 就 只 能 从 我 们 提供 的 数据 中 进行 选择 ， 不 能 随便 填写 自己 的 数据 ， 保 持 了 原生 


Select 的 原貌 。 


下 面 我 们 将 以 上 的 3 个 额外 配置 的 功能 组 装 在 一 起 ， 完 整 代码 如 下 : 


Var Store = new EXt .data.Storet{ 


proxy: new Ext .Gata.HttpProxy ({url:'07-04-01 .txt'}), 


reader: new Ext .data.ArrayReadGer{{}, [ 
{name: ‘value'}, 
{name: 'text') 
] ) 
从 
store.load(); 


Var combo = new Ext.form.ComboBox!(t{ 
store: store, 


emptyText : ' 请 选择 '， 
mode: ‘remote', 
triggerAction: 'all', 
valueField: 'value', 
displayField: ‘text', 
applyTo: 'combo', 
minListWidth: 220, 
pageSize: 5, 


resizable: true, 
readonly: true 
}}; 


示例 在 04.form/07-05-01.html 中 。 


4.7.6 ”监听 用 户 选择 的 数据 


下 面 我 们 来 讨论 一 下 如 何 使 用 EXT 中 提供 的 事件 机 
制 监听 ComboBox 的 事件 , 从 而 获知 用 户 选择 了 哪 条 数据 。 

在 用 户 每 选择 一 项 时 ， 就 弹出 一 个 窗口 显示 用 户 选 
择 的 项 的 详细 情况 ， 如 图 4-31 所 示 。 

你 可 能 会 觉得 奇怪 ， 我 们 是 怎么 实现 这 种 效果 的 
呢 ? EXT 会 在 你 执行 某 种 操作 时 执行 一 些 预 定义 的 操 
作 ， 这 些 预 定义 的 操作 就 叫做 事件 监听 ， 如 下 面 的 代码 
所 示 。 


combo.on{"select", functiont{comboBox){ 
alert (comboBox .getValue() + 
})2 





本 


图 4-31 根据 用 户 选择 的 项 弹出 
相应 的 信息 提示 窗口 





-+ ComboBox ,getRawValue() ) ; 


这 个 on 告诉 ComboBox, 要 监听 ComboBox, 并 设置 自己 的 事件 监听 器 。 第 一 个 参数 ,select， 
告诉 ComboBox 要 监听 哪个 事件 ， 第 二 个 参数 是 处 理 这 个 事件 的 事件 监听 器 ， 传 入 的 参数 是 被 监 
听 的 ComboBox 本 身 。 这 里 ， 我 们 在 ComboBox 发 生 select 事 件 时 通过 getvalue() 和 


getRawValue() 获得 用 户 选 定 的 项 的 具体 信息 。 
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你 可 能 会 问 :“ 你 怎么 知道 on 的 第 一 个 参数 是 ' select ' 呢 ? “其 实 EXT 中 的 每 个 组 件 支 持 的 
事件 都 可 以 从 它 自 带 的 API 文 档 中 找到 。 打 开 文 档 中 Ext.form.ComboBox 页 ， 在 Public Events 一 栏 
中 可 以 看 到 很 长 的 一 串 事件 列表 ， 其 中 就 包括 我 们 刚才 用 到 的 select。 

当 用 户 选中 ComboBox 下拉 列 表 中 的 某 一 项 时 ， 这 个 事件 就 会 被 触发 。 

EXT 的 事件 机 制 就 是 如 此 神奇 ， 在 选中 ComboBox 列 表 中 的 一 项 后 ，EXT 就 会 找到 所 有 绑 定 
到 select 事 件 的 监听 器 。 例 如 ， 我 们 刚才 就 用 on 方法 把 自 定义 的 函数 绑 定 到 了 select 事 件 上 。 
注意 ， 你 可 以 绑 定 一 个 函数 ， 也 可 以 绑 定 多 个 函数 ，EXT 会 执行 所 有 这 些 函数 ， 并 把 定义 好 的 3 
个 参数 传递 过 去 ， 供 我 们 使 用 。 完 整 代码 如 下 所 示 : 

var data = [ 

"valuel' i text1'], 
"Value2 ' ，'text2 ' ] ， 


alueilt texttiE"y, 
'valuel2','text12'] 





Var store = new Ext .data.SimplesStorel(t{ 
fields: ['value', ‘text'), 
data: data 


Var combo = new Ext.form.ComboBoxt{t{ 
store: store, 
emptyText : ' 请 选择 '， 
mode: 'local', 
triggerAction: 'query', 
valueField: 'value', 
displayField: ‘text', 
applyTo:; 'combo' 

号 内 


combo .on('select'，fEfunctiocon(comboBox) ( 


alert {comboBox.getValue{) + '-' + ComboBox.getRawValue{)}; 
i 


示例 在 04.form/07-06-01.html 中 。 


4.7.7 ”使 用 本 地 数据 实现 省 、 市 、 县 级 联 
下 面 我 们 来 根据 事件 监听 器 来 制作 一 个 多 ComboBox 级 






i 
联 显示 数据 的 示例 。 这 是 一 个 非常 典型 的 示例 ， 以 前 经 常用 。 再 0 一 一 一 
select 实 现 它 ， 现 在 来 看 看 用 ComboBox 实 现 的 效果 ( 见 图 | 路 北 区 | 
4-32 )。 CR TO 


实现 图 4-31 中 的 效果 的 思路 大 致 是 这 样 的 ， 我 们 先 准备 “432 多 ComboBox 级 联 明示 数据 
好 省 、 市 、 县 的 数据 〈 都 是 二 维 数组 )， 级 联 显示 的 数据 就 是 从 它们 之 中 获取 的 《 见 代码 清单 
4-11 )。 
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代码 清单 4-f 多 ComiboBox 级 联 显示 数据 


var dataProvince = [ 
[' 河 北 ',' 河 北 ']】， 
[' 内 蒙古 ',' 内 蒙古 ' ] 
]3 
var dataCityHebei = [ 
E' 唐 山 ',' 唐 山 ']， 
[ "秦皇岛 '，' 秦 皇 岛 ' ] ， 
[ 承德， :承德 ' ] ， 
[ 张家口: ，' 张 家 口 ' ] 
民 
var dataCityNeimenggu = I 
(' 呼 和 浩特 '，' 呼 和 浩特 ' ] ， 
[' 包 头 '，' 包 头 '] 


] 3 

/1/ 其 中 : 遵 化 、 迁 安 为 县 级 市 。 

var dataCountyTangshan = [ 
[ "路 南 区 ' ，' 路 南 区 ' ] ， 
[ "路 北 区 ' ，' 路 北 区 '] ， 
[开平 区 开平 区 7] ; 
[' 古 治 区 ' ，' 古 冶 区 ' ] ， 
[丰润 区 ' ，' 丰润 区 ' ] ， 
[' 丰 南 区 ' ，' 丰 南 区 ' ] ， 
[5 
[' 亲 化 ',' 遵 化 ']， 
[' 迁 西 ' ,' 迁 西 ' ] ， 
[十 分 迁 安富] ; 
[ ' 洪 县 "'，' 沪 县 ' ] ， 
[' 深 南 ',' 深 南 ']， 
[' 乐 享 ',' 乐 亭 ']， 
[' 唐 海 ' ，' 唐 海 ' ] 

Lg 

Var dataCountyUnknow = [ 
[不 知道 , ，' 不 知道 ' ] 

] ; 


然后 我 们 需要 3 个 数据 转换 器 ， 分 别 对 应 省 、 市 、 县 的 Ext .data.SimpleDpata。 原 始 数据 经 
过 它们 的 处 理 才 可 以 提交 给 ComboBox， 从 而 显示 出 我 们 的 效果 ， 如 代码 清单 4-12 所 示 。 


代码 清单 4-12 ”对 应 的 store 


Var storeProvince = new Ext.data.Simplestorelt 
fields; [value'， 'text'], 
data: dataProvince 

hs 

Var storeCity = new Ext.data.SimpleStoret{t 
fields: ['value', ‘text'}), 
data: [] 

}}: 

Var storeCounty = new Ext .data,SimpleStoreltf 
fields: ['‘'value', '‘'text'], 
Gata: [) 

Ls 


Download at Pin5i.Com 


http://52pdf.taobao.com 


4.7 ”ComboBox 详解 131 





注意 ， 上 面 的 代码 中 只 为 storeProvince 提 供 了 预先 定义 好 的 二 维 数组 dataProvince， 其 
他 两 个 store 里 使 用 的 都 是 空 数组 [] 。 因 为 在 没有 选择 省 级 地 区 之 前 ,市 级 地 区 和 县 级 地 区 是 不 
应 该 有 数据 的 。 

现在 可 以 制作 3 个 ComboBox 了 。 每 个 Combobox 都 配置 成 reaaonly :true， 这 样 可 以 避免 用 
户 输入 无 效 信息 。 设 置 参 数 triggeraction:al1 避 免 ComboBox 使 用 autocomplete 的 效果 ， 让 
每 次 选择 都 可 以 看 到 所 有 的 可 选 数据 ， 有 具体 实现 如 代码 清单 4-13 所 示 。 


代码 清单 4-13 ”设置 ComboBoex 


Var comboProvince = new EXxt.formn.ComboBox1({ 
store: storeProvince, 
emptyText : ' 请 选择 '， 
mode: 'local', 
triggerAction: ‘all', 
valueField: 'Vvalue'， 
displayField: ‘text', 
readOonly: true 
ER 
Var comboCity = new Ext.form.ComboBox{t{ 
store: storeCity, 
emptyText : ' 请 选择 '， 
mode; 'local', 
triggerAction: 'all', 
valueField: 'value'!, 
displayField: 'text', 
readOonly: true 
i 
Var comboCounty = new Ext.form.ComboBox(t 
store: storeCounty, 
emptyText : ' 请 选择 '， 
mode: 'local', 
triggerAction: ' all'， 
valueField: 'value'， 
displayField: 'text '， 
readonly: true 
}) ; 
comboProvince.applyTo!('comboProvince'); 
comboCity .applyTo{'comboCity'); 
comboCounty .applyTol('comboCounty'}); 


在 HTML 里 对 应 放 上 3 个 input， 显 示 部 分 就 基本 完成 了 ， 如 下 面 的 代码 所 示 。 


<input id="comboProvince" type="text'"/> 
<input id="comboCity" type="text"/> 
<input id="comboCounty" type="text"/> 


现在 我 们 来 看 看 关键 的 地 方 ， 如何 让 3 个 ComboBox 关 联 起 来 选择 上 级 时 ， 下 级 显示 的 信息 
要 发 生 相应 的 变化 。 这 就 要 用 到 前 面 提 到 的 on ('select') 执 行事 件 监 听 了 ， 如 代码 清单 4-14 所 
示 。 
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代码 清单 4-14 ”利用 on "seleetc ' 执行 事件 监听 


ComboProvince-on('select'，ftunction(comnboBox)1{ 
Var province = comboBox.getValue!(}); 


if (province == ‘河北 ') { 
storeCity.loadData(dataCityHebei)}); 
} else if (province == ' 内 蒙古 ') { 


storeCity.loadData(dataCityNeimenggu); 
} 
}); . 
comboCity.onl'select’', functionl(comboBox})t{ 
var city = comboBox.getValue!(); 


if (city == ' 唐 山 ') 1 
StoreCounty .loadData(dataCountyTangshan); 
} else 1{ 


storeCounty.loadData (dataCountyUnknow); 
} 
})，; 
comboCounty.onl'select', function{comboBox)i 
alert (comboProvince.getValue{() + '-' + comboCity.getValue{) + '-' + ComboCounty. 
getVvalue(}); 
Fi 


像 上 面 的 代码 这 样 ， 给 3 个 ComboBox 都 设置 上 on('select ') 的 事件 监听 。 在 选择 省 时 ， 先 
判断 选择 的 是 哪个 省 。 如 果 我 们 选择 的 是 河北 ， 那 么 就 要 在 市 级 ComboBox 里 显示 河北 省 所 管辖 
的 城市 的 信息 。 

注意 我 们 用 到 的 storeCity .loadData (dataCityHebei);， 这 个 前 数 可 以 改变 store 内 部 
的 数据 。store 的 数据 改变 了 ， 对 应 的 ComboBox 也 就 发 生 了 变化 。 省 和 市 的 操作 是 一 样 的 ， 最 
后 在 选择 县 时 用 aiert 弹 出 最 终 选择 的 信息 。 

上 述 过 程 就 是 我 们 使 用 ComboBox 实 现 的 省 、 市 、 县 三 级 级 联 。 

示例 在 04.form/07-07-01.html 中 。 


4.7.8 ”使 用 后 台数 据 实现 省 、 市 、 县 级 联 


在 上 面 的 示例 中 ， 省 、 市 、 县 的 信息 都 写 在 前 台 ， 现 在 我 们 来 演示 一 下 如 何 从 后 台 获 得 数据 
并 实现 省 、 市 、 县 三 级 级 联 。 我 们 的 后 台 采 用 JSP 编 写 ， 脚 本 的 名 称 为 cityjsp， 如 代码 清单 4-15 
所 示 。 


代码 清单 4-15 cityjjsp 


<%@ page contentType="text/html ;charset=utf-8"%®> 
< 多 ! 
String province = "ff 河北 '， :河北 ']1，[ 内 蒙古 ' ,内 蒙古 'j]"; 
String cityHebei = "{" + 
"[ ,唐山 ,，' 唐 山 '] "+ 
“[ ,秦皇岛 ,秦皇岛 '] ," + 
"[' 承 德 ',' 承 德 ']," + 
“[ "张家口 '，' 张 家 口 '] "+ 
i 
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String cityNeimenggu = "[" + 
"[' 呼 和 浩特 ',' 呼 和 浩特 '],"” + 
"[' 包 头 ",' 包 头 ']" + 

Ee 

String countyTangshan = " 
"[' 路 南 区 ',' 路 南 区 ']," 
"[' 路 北 区 ',' 路 北 区 '] ," 
"[' 开 平 区 '，' 并 平 区 '] ;" 
"[' 古 治 区 ',' 古 治 区 '],* 
"{' 丰 润 区 ',' 丰润 区 '),* 
"[ ' 丰 南 区 ' ，' 丰 南 区 '] ," 


和 省 





a 沪 
"[' 尊 化‘, ' 遵 化"]】," + 
TE 由] 击 
“和 
"[' 深 县 ' ,' 深 县 '] ," + 
"[' 深 南 ',' 深 南 ']," + 
" [条 党 "5' 乐 享 '],，" + 


"[' 唐 海 '，' 唐 海 '] ， + 
1] 
string countyUnknow = "[[! 不 知道 ',' 不 知道 '] ]"， 
外 > 
工 锡 
request.setCharacterEncoding ("UTF-8"); 
response.setCcharacterEncoding ("UTF-8"); 


String type = request .getParameter("type"); 
if ("province".equals (type)) 1 
zeSponse .getWwWriter() .print (province); 
} else if ("city".equals (type})) 1{ 
String province = java.net .URLDecoder.decode {regquest .getParameter("id")); 
System.out .printin{(province):; 
if ("河北 ".equals {province)) 1{ 
response,.getWriter() .print (cityHebei); 
] else if ("内 蒙古 " .equals (province)) { 
response.getWriter() .print (cityNeimenggu); 
} 
} else if (*county".equals(type}) { 
String city = request .getParameter ("id"}); 
if (〈(* 唐 山 " .equals(city)) 1 
response.getWriter{) .print {countyTangshan); 
} else { 
response.getWriter() .print (countyUnknow); 


} 


多 > 

需要 注意 的 是 ， 因 为 Ajax 默认 使 用 UTF-8 编 码 传输 数据 ， 所 以 需要 把 示例 中 的 文件 都 转换 成 
UTF-8 编 码 格 式 ， 否 则 就 会 出 现 乱 码 。 还 要 对 request 和 response 进 行 处 理 ， 统 一 使 用 UTF-8 编 
码 。 建 议 所 有 项 目 文件 都 统一 使 用 UTF-8 编 码 ， 这 样 会 有 更 好 的 扩展 性 。 

仔细 查看 city.jsp 中 的 内 容 , 文件 开头 的 <%!1%> 部 分 定义 了 我 们 需要 返回 的 省 、 市 、 县 的 数据 。 
这 里 使 用 了 JSON 格 式 的 字符 串 ， 回 传 到 页 面 后 ，EXT 会 把 它们 解析 成 对 应 的 JSON 数 组 。 
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主 程序 体 很 简单 ， 先 获得 type 的 值 ， 进 而 判断 后 面 要 读 取 省 、 市 、 县 哪 一 部 分 的 信息 ， 根 


据 type 分 别 进入 各 自 的 流程 。 
后 台 准 备 完毕 , 现在 对 前 台 进 行 修改 。 先 将 Ext .data .SimpleStore 改 成 Ext .data. Store， 
使 用 HttpProxy 指 向 我 们 准备 好 的 city .jsp， 然 后 控制 store 在 选择 不 同 ComboBox 时 向 后 台 传 


递 不 同 的 type 参 数 ， 如 代码 清单 4-16 所 示 。 
代码 清单 生 16 ”远程 store 


机 ， 


Var 


Fy 
Var 


了 
Var 


Es 


storeProvince = new Ext .data.storel(t 
proxy: new Ext .data.HttpProxy{{url: 'city.ijsp?type=province'}), 
reader: new Ext .data.ArrayReader ({},I[ 
{name: 'value' }, 
{name: 'text'} 
] ) 


storeCity = new Ext.dGata.Storelt 
proxy: new Ext .data.HttpProxy({url: 'city.jsp?type=city'}), 
reader: new Ext .data.ArrayReader({},I[ 
{name: 'value’)}), 
{name: 'text'} 
] ) 


storeCounty = new Ext .data.Storel{t{ 
proxy: new Ext .data.HttpProxy ({url:'city.jsp?type=county'}), 
reader: new Ext.data.ArrayReader({(},'{ 

{name: 'value'}, 

{name: 'text'} 


| 


从 上 例 中 可 以 看 出 ， 除了 HttpProxy 中 url1 的 最 后 type 部 分 不 同 外 ， 其 他 代码 都 是 一 样 的 。 
创建 ComboBox 的 其 他 部 分 完全 一 样 ，mode 依 然 使 用 local 方 式 ， 因 为 要 控制 读 取 数据 的 时 
所 以 手动 运行 store.1oad{) 更 符合 我 们 的 需要 。 

对 on('select ') 事 件 监 听 器 进行 了 一 些 修 改 ， 控 制 对 应 的 store 向 后 台 发 送 请 求 ， 如 代码 
清单 4-17 所 示 。 


代码 清单 4-17 事件 监听 (远程 》 


storeProvince.load!(); 
comboProvince.onl(l'select', functiont{comboBox)t{ 


3s 


var value = comboBox.getValue!(): 
storeCity.load{( {params: {id:value}}); 


comboCity.on('select', function(comboBox}t{ 


}); 


Var Value = comboBox.getValue{); 
storeCounty .ioadl({params: {id:value}}); 


comboCounty.on('select', functiont{comboBox}t{ 


py 


alert (comboProvince.getValue() + '-' + comboCity.getValue() + '-' + comboCounty. 
getValue()); 
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从 上 述 代码 可 以 看 出 ， 我 们 先 执行 storeProvince.1oad() ;， 将 省 级 数据 初始 化 。 然 后 判 
断 用 户 选择 了 省 级 信息 的 哪 一 项 , 取得 数据 以 后 再 调用 市 级 ComboBox 的 10ad() 函数 去 后 台 读 取 
数据 。 这 时 我 们 选择 的 省 级 信息 会 被 当 作 参数 传递 给 后 台 ， 后 台 根 据 传 递 过 来 的 ia 值 判断 究竟 要 
返回 省 、 市 、 县 哪 一 级 的 信息 数据 。 





注意 ”为 了 统一 编码 ,07-08-01.html 和 cityjsp 都 另存 为 UTF-8 编 码 ,它们 都 放 在 本 书 示例 的 04.form 
目录 下 。 








4.8 复 选 框 和 单 选 杠 


从 组 件 继承 结构 图 中 可 以 看 到 , 复 选 框 (Checkbox ) 和 单 选 框 (Radio) 是 与 文本 框 (TextField) 
完全 不 同 的 分 支 。 之 前 讨论 到 的 验证 和 布局 功能 有 很 大 的 区 别 ， 所 以 要 对 它们 进行 单独 的 讨论 。 


4.8.1 复 选 杠 


要 在 表单 里 加 上 复 选 框 就 需要 用 Ext . form. Checkbox， 
可 惜 的 是 我 们 无 法 控制 复 选 框 的 样式 , 与 其 他 表单 控件 相 比 ， Am 


老汉 


它 显得 十 分 难看 ( 见 图 4-33)。 a 
从 图 4-33 中 可 以 看 出 ， 我 们 用 一 个 Fieldset 把 三 个 复 选 框 。 zww- 
放 在 了 一 起 。 但是， 你 有 没有 注意 到 ， 复 选 框 对 应 的 标签 都 三 * 地 = 
位 于 选择 框 的 右边 。 这 并 不 是 我 们 控制 了 标签 的 显示 位 置 ， 
而 是 因为 使 用 了 boxLabel 的 原因 。boxLabel 是 复 选 框 和 单 选 ee 
框 两 个 控件 独 有 的 , 支持 在 控件 右 侧 显示 标签 。 它 与 labelField 图 4.33 复 选 杠 
只 是 位 置 不 同 ， 具 体 应 用 中 可 以 随意 选择 ， 如 下 面 的 代码 所 
示 。 
items: [(f 
xtype: ‘'fieldset', 
title: :多 选 '， 
autoHeight:true, 
defaultrType: ‘checkbox', 
hideLabels: true, 
' 争 选 一 '， checked: truel ， 
{boxLabel: ' 多 选 二 ')， 
{boxLabel; ' 多 选 三 ' } 
] 
3 


et css 
注意 为 了 避免 出 现 前 后 两 个 标签 ， 还 是 把 hideLabels 设 置 为 true 比 较 好 ， 这 样 左 侧 的 


fieldLabel 就 不 会 显示 出 来 了 ， 
og 
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现在 我 们 可 以 单 击 “提交 ”按钮 ， 但 是 后 台 无 法 区 分 这 3 个 复 选 框 ， 因 为 value 的 默认 值 都 
是 cn， 提交 的 数据 就 变 成 这 样 : 


checkbox=on&checkbox=on&checkbox=on 


怎么 区 分 这 3 个 复 选 框 呢 ? 我 们 需要 使 用 inputValue 来 指定 这 3 个 复 选 框 的 值 ， 如 下 面 的 代 


人 码 所 示 。 
items: [f{ 
xtype: 'fieldset', 
title: ' 多 选 '， 


autoHeight:true, 
defaultType: 'checkbox', 
hideLabels: true, 

items: [ 


{boxLabel: ' 多 选 一 ' ，inputValue: '1', checked: rue]， 
{boxLabel: ' 多 选 二 ' ，inputValue: '2'}， 
{boxLabel: ' 多 选 三 ' ，inputValue: '3')} 
] 
F's 
再 次 提交 就 会 得 到 这 样 的 结果 : 


checkbox=1L&checkbox=2&checkbox=3 


怎么 样 才能 让 这 几 个 Checkbox 一 开始 就 是 选中 状态 呢 ? 我 们 可 以 使 用 checkeda: true 参 数 ， 
上 面 示 例 中 的 第 一 个 Checkbox 就 演示 了 这 种 效果 。 
示例 在 04.form/08-01-01.html 中 。 


4.8.2 ” 单 选 框 


EXT 中 的 单 选 框 (Radio〉 是 继承 自 复 选 框 的 ， 所 以 复 选 框 中 的 所 有 功能 都 能 在 单 选 框 中 使 
用 。 唯 一 的 区 别 是 ， 当 你 希望 制作 一 组 单 选 框 并 限制 每 次 只 能 选 一 个 时 ， 就 要 进行 一 些 有 别 于 复 
选 框 的 配置 了 ， 如 下 面 的 代码 所 示 。 


items: [{ 
xtype: ‘fieldset', 
title: ' 单 选 ' 7 


autoHeight :上 rue， 
defaultType: 'radio'， 
hideLabels: true, 
items: [ 


{boxLabel: ' 单 选 一 '， name: 'radio', inputValue: '1', checked: true}, 
{boxLabel : ' 单 选 二 '，name: 'radio', inputValue: '2'}, 
{boxLabel: ' 单 选 三 '， name: 'radio', inputValue: '3'} 


] 
)]， 


注意 3 个 单 选 框 的 name 参 数 ， 具 有 相同 名 称 的 单 选 框 会 放 在 同一 组 ， 这 样 就 可 以 保证 同一 组 
只 有 一 个 单 选 框 被 选中 ， 如 图 4-34 所 示 。 
因为 名 称 都 是 一 样 的 ，inputValue 就 显得 尤为 重要 了 ， 和 否则 我 们 无 法 判断 用 户 选择 了 哪个 
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单 选 框 。 
除了 复 选 框 所 拥有 的 功能 之 外 ， 单 选 框 还 有 一 个 自己 独 有 的 
函数 getGroupValue () 。 这 个 函数 可 以 获得 某 个 分 组 中 被 选中 的 
单 选 框 的 值 ， 我 们 再 也 不 用 手工 查找 同一 分 组 中 哪个 单 选 框 被 选 
中 了 。 在 示例 中 ， 我 们 专门 设置 了 一 个 按钮 来 演示 getGroup- 
Value() 效 果 ， 你 也 可 以 试 试看 。 

示例 在 04.form/08-02-01.html 中 。 


4.9 文件 上 传 


如 何在 EXT 中 使 用 文件 上 传 组 件 呢 ? 方法 其 实 很 简单 ， 为 Ext . form.Field 设 置 inputType: 


'file' 即 可 ， 但 我 们 无 法 修改 它 的 显示 样式 ， 如 图 4-35 所 示 。 


form 
文本 框 ; | 调 跨 o 


图 4-35 文件 上 传 
我 们 现在 需要 了 解 如 何 才能 让 这 个 表单 实现 文件 上 传 功能 。 


搞 泣 getGroupY de 


图 4-34 单 选 框 


首先 ， 为 表单 添加 fileUpload: true 参 数 ， 如 下 面 的 代码 所 示 。 


Var form = new Ext.form.FormPpanel(t{ 
labelAlign: 'right' ， 
title: 'form', 
labelWidth: 50, 
frame:true, 
fileUpload: true, 
rls: 和 多 -人 下 本 三 四 二 
width: 280, 


其 次 ， 给 表单 添加 一 个 field， 并 为 它 设置 inputType: 'file'， 如 下 面 的 代码 所 示 。 


items: [{ 
xtype: 'textfield', 
fieldLabel: ' 文 本 框 '， 
name: 'file', 
inputType: ‘'file' 


现在 单 击 “ 提 交 ” 按 钮 就 可 以 上 传 文 件 了 。EXT 中 使 用 Ajax 实 现 文 件 上 传 ， 不 需要 刷新 整个 
页 面 。 而 在 后 台 处 理 文件 上 传 的 09 01jsp 中 ， 我 们 使 用 了 commons-fileupload 组 件 处 理 客户 上 传 
的 文件 ， 运 行 示例 程序 之 前 ， 先 要 把 commons-io 和 commons-fileupload 放 到 lib 下 ， 这 样 才 可 以 使 


用 。 
示例 在 04.form/09_01.html 中 。 
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当然 ， 这 里 使 用 的 inputType: 'file' 也 只 是 HTML 中 的 原生 file 组 件 ， 连 外 观 也 没有 任何 变 
化 。 在 EXT 的 官方 网 站 上 可 以 找到 一 个 上 传 的 扩展 件 Ext .ux.UploadDialog。 关 于 如 何 使 用 扩 
展 件 的 问题 已 经 超出 了 本 书 的 范围 ， 建 议 大 家 自己 尝试 一 下 。 


4.10 自动 把 数据 填充 到 表单 中 


添加 数据 与 修改 数据 的 操作 是 相辅相成 的 ， 很 少 有 只 允许 添加 而 不 允 修 改 的 情况 。 如 果 要 进 
行 修 改 ， 还 是 使 用 原来 的 表单 ， 我 们 需要 做 的 就 是 在 表单 显示 时 为 每 个 控件 赋予 对 应 的 数据 。 我 
们 知道 Ext . form.Field 都 有 setValue() 函 数 ， 可 以 设置 表单 中 对 应 控件 的 数据 。 但 是 ， 把 这 
些 控件 逐个 取出 来 ， 然 后 再 逐个 赋值 ， 还 有 很 多 数据 要 进行 类 型 转换 ， 实 在 是 很 麻烦 。 

我 们 有 一 个 包含 了 如 下 控件 的 表单 ， 如 图 4-36 所 示 。 

如 果 只 需要 单 击 “ 读 取 ” 按 钮 就 可 以 把 对 应 的 数据 自动 填充 到 每 个 控件 中 《〈 见 图 4-37)， 并 
且 附 带 数据 类 型 转换 ， 那 就 更 方便 了 。 


form 


form 
次 本 : 文本 ; textField 
数字 : 数字 :; 12.34 
日 期 : [本 日 期 : 061/0172008 :3 
下 控 ; v 下 拉 : text1 v 
检 交 迹 职 提交 法 最 
图 4-36 ”准备 填 入 数据 的 表单 图 4-37 填 入 数据 后 的 表单 


我 们 当然 不 会 使 用 setvalue () 为 每 个 控件 填充 数据 。 为 了 让 复杂 的 工作 变 得 简单 ， 我 们 使 
用 Ext .data.JsonReader 来 负责 数据 的 读 取 和 转换 操作 。 
后 台 传 过 来 的 数据 是 只 有 一 个 元 素 的 JSON 数 组 ， 如 下 面 的 代码 所 示 。 


[{ 
text: ‘textField', 
number: 12.34, 
date: '2008-01-01T00:00:00'，, 
combo: 1 
}] 


这 里 提供 了 字符 串 、 数 字 、 日 期 等 类 型 的 数据 ， 表 单 中 需要 配置 对 应 的 reader， 如 下 面 的 
代码 所 示 。 


Var reader = new Ext.data.JsonReader({},[ 
{name: ‘text', type: 'string'}, 
(name: '‘'number', type: 'float'}, 
{name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s'}, 
{name: 'combo', type: ‘int'} 
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现在 我 们 将 设置 好 的 reader 放 到 表单 中 , 后 台 返 回 的 JSON 会 在 这 里 被 JsonReader 转 换 成 对 
应 的 数据 类 型 ， 供 表单 使 用 ， 如 下 面 的 代码 所 示 。 


Var form = new Ext.form.FormPanell(!{ 
labelAlign: 'right', 
titlieor Forni”, 
labelwidth: 50, 
frame:true, 
UP 090 I 
width: 280, 
reader: reader, 


items: [{ 
xtype: 'textfield', 
fieldLabel: ' 文 本 '， 
name: 'text'’ 


xtype: 'numberfield' ， 
fieldLabel: ' 数 字 '， 
name: ‘number' 


xtype: ‘'dGatefield', 
fieldLabel: ' 日 期 '， 
name: ‘date' 


xtype: ‘combo', 

fieldLabel: ' 下 拉 '， 

name: ‘combo', 

store: new Ext .data.SimpleSstorelt 


fields: ['value', 'text'], 
Gata : [ 

人 “Textili*y, 

By: tere 

37 “text3] 


] 
}) 5 
triggerAction: ‘all', 
valueField: '‘'value', 
displayField: 'text'’ 
}] 


当 调 用 form.1oad() 函数 时 ， 表 单 会 使 用 Ajax 去 后 台 读 取 需 要 的 数据 。 如 果 调 用 lcaa () 时 
没有 使 用 任何 参数 ，load () 函数 就 会 使 用 表单 中 对 应 的 ur1 参 数 。 不 过 表单 中 设置 的 url 一 般 都 
是 提交 数据 的 网 址 ， 为 了 不 将 提交 和 读 取 这 两 个 操作 混在 一 起 , 我 们 建议 另外 定义 一 个 专门 用 来 
读 取 数 据 的 url1， 如 下 面 的 代码 所 示 。 


{ 
text: ' 读 取 '， 
handler: function() { 
form.getForm{) .load{i{url:'10-01 .txt'}); 
} 
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现在 我 们 为 1oaq ) 传 递 一 个 ur1 参 数 ,指定 读 取 数 据 的 网 址 。 这 个 网 址 返回 的 信息 就 是 上 面 
提 到 的 用 于 向 表单 填充 数据 的 JSON 字 符 串 ， 这 样 就 实现 了 自动 为 表单 中 的 各 个 组 件 填充 数据 的 
功能 。 

除了 1loaq () 函 数 外 ， 表 单 还 提供 了 一 个 loadRecord() 函数 。 因 为 在 EXT 的 组 件 体 系 中 ， 很 
多 地 方 都 会 用 到 Ext .data.Store 和 Ext .data.Record。 例 如 ， 最 常见 的 是 表格 和 ComboBox， 
通过 loadRecord()， 我 们 可 以 把 表格 中 的 一 条 数据 加 载 到 表单 中 ， 从 而 进行 修改 。 

示例 在 04.form/10-01.html 中 。 


A 
提示 从 EXT 3.0 开 始 ， 表 单 可 以 选择 使 用 Ajax 或 是 Ext Direct 方 式 来 进行 数据 提交 和 数据 读 取 ， 


有 关 Ext Direct 的 介绍 可 以 在 第 14 章 中 找到 ， 
essenienttreinebi Aeenak hin ,eet ere ee 


4.11 小 结 


本 章 主要 介绍 了 EXT 中 的 表单 以 及 表单 中 使 用 的 输入 组 件 , 通过 组 件 继承 图 我 们 可 以 清楚 地 
了 解 到 它们 之 间 的 相互 关系 。 我们 以 Ext . form.TextFiela 为 基础 ， 介 绍 了 常用 组 件 的 功能 以 及 
数据 校 验方 式 ， 并 特别 介绍 了 Ext .form.ComboBox、 Ext .form.Checkbox、 Ext .form.Radio 
以 及 上 传 组 件 的 使 用 方法 ， 同 时 还 讲解 了 使 用 ComboBox 如 何 实现 三 级 联动 。 

本 章 还 讲解 了 表单 的 提交 、 数 据 校 验 、 表 单 布 局 ， 最 后 介绍 了 如 何 将 外 部 数据 填充 到 表单 内 
的 组 件 中 。 
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第 5 章 
树 形 结构 








本 章 内 容 
日 Treepanel 的 基本 使 用 

口 树 的 事件 

口 右键 菜单 

9 修改 节点 的 默认 图 标 

口 从 节点 弹出 对 话 框 

节点 提示 信息 

D 为 节点 设置 超 链 接 

Q 直接 修改 树 节点 名 称 

D 树 形 的 拖 放 

口 树 形 过 滤器 TreeFilter 

口 利用 TreeSorter 对 树 进行 排序 

口 树 形 节点 视图 Ext .tree.TreeNodeUI 
表格 与 树 形 的 结合 











Ext ,UxXx.tree.ColumTree 


5.1 TreePanel 的 基本 使 用 


在 应 用 程序 中 ， 我 们 经 常 需要 显示 或 处 理 树 状 结构 的 对 象 信 息 ， 比 如 部 门 信息 和 地 区 信息 
(省 、 市 、 县 ) 等 。 树 是 一 种 非常 典型 的 数据 结构 ， 这 些 信息 都 可 以 用 树 表示 。 

对 传统 的 HTML 页 面 来 说 ， 完 全 依靠 手动 编码 来 实现 树 是 比较 困难 的 ， 因 为 需要 写 很 多 的 
JavaScript 代 码 。 对 基于 Ajax 异步 加 载 的 树 来 说 更 是 如 此 ， 不 但 涉及 Ajax 数据 异步 加 载 ， 还 需要 考 
虑 跨 浏 览 器 支持 ， 处 理 起 来 非常 麻烦 。EXT 中 提供 了 现成 的 树 控件 ， 通 过 这 些 控件 ， 可 以 在 B/S 
应 用 中 快速 开发 出 包含 树 形 信息 结构 的 应 用 。 


5.1.1 创建 一 棵 树 


树 控件 由 Ext .tree.TreePanel 类 定义 ， 控 件 的 名 称 为 Treepanel，TreePanel 类 继承 自 
Pane1 面 板 。 在 EXT 中 使 用 树 控 件 其 实 非常 简单 ， 我 们 先 来 看 下 面 的 代码 。 
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Var tree = new Ext.tree.TreePpanell(t 
el: ‘tree!’ 
1 


这 里 的 参数 Eree 表 示 泻 染 的 DOM 的 ia。HTML 中 有 <aiv id="tree"></div> 相 对 应 ， 最 后 
这 棵 树 就 出 现在 这 个 div 的 位 置 上 。 

现在 ， 我 们 获得 了 树 形 面板 。 既 然 是 树 ， 就 必须 有 一 个 根 ， 有 了 根 才 能 在 上 面 生 长 枝 节 ， 最 
后 成 为 一 棵 完整 的 树 ， 所 以 根 是 必须 的 。 我 们 通过 下 面 的 代码 看 看 根 是 如 何 生长 的 。 


var root = new Ext .tree,.,TreeNode{{text:' 我 是 根 '})); 
tree.setRootNode (root); 
tree.render(); 


上 面 代 码 的 第 1 行 就 是 定义 一 棵 树 的 根 。 我 们 用 setRootNode() 方 法 把 根 root 放 到 树 形 里 。 
然后 对 树 形 进行 泻 染 ， 让 它 出 现在 ida="tree" 的 位 置 ， 这 个 ia 是 在 前 面 代 码 里 指定 的 ， 如 果 有 上 疑 
问 ， 请 查阅 前 面 的 内 容 。 

这 样 我 们 就 创建 了 一 棵 只 有 根 的 树 ， 如 图 5-1 所 示 。 习 我 吓 根 

当然 ， 它 现在 怎么 看 都 不 像 是 树 ， 因 为 其 实 只 创建 了 一 棵 树 的 

图 $5-1】 只 
根 。 下 面 就 可 以 在 这 个 根 上 面 开 枝 散 叶 了 。 本 


注意 ”虽然 只 有 一 个 根 ， 不 过 也 算是 棵 树 ， 示 例 在 文件 05.tree/01-01-01.html 中 . 


5.1.2 为 树 生 梳 展 叶 


上 面 已 经 创建 了 一 棵 只 有 根 的 树 ， 下 面 我 们 就 为 树 添加 枝 和 叶 ， 让 它 看 上 去 更 像 一 棵 树 ， 如 
代码 清单 5-1 所 示 。 


代码 清单 5-1 ”为 树 添加 枝 和 时 


var root = new Ext.tree.TreeNode({ttext:' 我 是 根 ' ) ) ; 

var nodel = new Ext.tree.TreeNode({text:;' 我 是 根 的 第 一 个 枝 '}); 

var node2 = new Ext.tree.TreeNode({text:' 我 是 根 的 第 一 个 枝 的 第 一 个 叶子 ')); 
var node3 = new Ext .tree.TreeNode({text:' 我 是 根 的 第 一 个 叶子 ' )); 

nodel .appendChild{node2); 

root .appendChild (nodel),; 

root .appendachildtnoae3 ) ; 


我 们 创建 了 3 个 TreeNode， 然后 把 node2 插 到 nodel1 上 ，nodei、node? 一 起 插 到 root 上 。 这 
样 node2 成 了 叶 ，nodel 是 枝 ， 长 在 根 root 上 。node3 直 接生 
长 在 根 上 ， 而 下 面 又 没有 再 长 出 任何 东西 ， 便 也 被 称 作 是 叶 ， 当 [2 我 足 根 
现在 就 更 像 是 一 棵 树 了 《〈 见 图 $-2) 。 

现在 , 这 棵 树 看 上 去 仍 像 是 一 个 根 ,但 图 标 却 发 生 了 变化 。 “5 2 亚 加 枝叶 后 的 滑 《 未 展开) 
图 标 前 多 了 个 加 号 ， 现 在 的 根 可 以 展开 了 ， 如 图 5-3 所 示 。 

树 展 开 后 ,就 可 以 看 到 它 的 枝 和 叶 了 。 不 过 , 每 次 都 要 点 击 根 或 枝 前 面 的 加 号 才能 展开 整 棵 
树 。 这 样 过 于 麻烦 ， 我 们 可 以 让 树 加 载 后 就 立刻 展开 ， 如 下 面 的 代码 所 示 。 
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刁 《 二 我 足 根 
日 局 我 是 根 的 第 一 个 枝 于 
图 我 吓 根 的 第 一 个 起 于 的 第 一 个 叶 于 
习 我 足 报 的 第 一 个 叶 于 


图 5-3 ”添加 枝叶 后 的 树 〈 已 展开 ) 
root .expand (true, true); 


只 用 一 行 简单 的 代码 就 实现 了 我 们 想 要 的 功能 。 上 面 代 码 里 的 第 一 个 参数 表示 是 否 递 归 展 开 
所 有 子 节点 ， 如 果 为 false， 就 只 展开 第 一 级 子 节点 ， 下 面 的 子 节点 仍然 是 折 胞 状态 。 第 二 个 参 
数 表示 是 否 要 动画 效果 ， 如 果 为 true， 可 以 明显 看 出 这 些 节点 是 逐渐 展开 的 。 当 然 ， 它 们 也 可 
以 直接 展开 。 

为 了 方便 ， 在 我 们 的 示例 中 是 直接 展开 的 。 

示例 在 0$.tree/01-02-01.htmj 中 。 


5.1.3 ” 树 形 的 配置 


下 面 我 们 修改 一 下 TreePanel1 的 定义 ， 原 来 的 ia 要 放 到 {} 中 ， 对 应 的 名 字 是 el， 修 改 后 的 
代码 如 下 所 示 。 


Var tree = new EXxt .tree.TreePanel(i 

renderTo: 'tree', 

root : new Ext .tree.TreeNode( {text:' 我 是 根 '}) 
})3? 


但 是 ， 这 样 改 完 之 后 还 是 没有 内 容 显示 。 用 Firebug 查 看 DOM，height 竟 然 为 0， 当 然 看 不 
到 任何 内 容 了 。 因 为 树 不 能 自动 计算 自身 的 高 度 ， 我 们 只 好 给 它 设 置 一 个 初始 高 度 。 在 HTML 里 
设置 这 个 高 度 为 300 (px) ， 这 样 就 可 以 显示 出 内 容 了 。 

如 下 面 的 代码 所 示 : 


<Giv id="tree" style="height :300px;"></div> 


如 果 不 想 设置 div 的 CSS 高 度 ， 我 们 也 可 以 加 入 autoHeight:true， 让 treePanel 自 己 计算 
显示 的 高 度 。 我 们 还 可 以 看 到 鼠标 移 到 树 节点 上 时 的 突出 显示 ， 如 图 $-4 所 示 。 


避 忆 3 我 是 根 
加 所 3 护 足 要 的 第 一 个 坡 于 
我 是 根 的 第 一 个 技 予 的 第 一 个 吁 了 予 
悦 我 归根 的 第 一 个 呈 子 


图 $-4 ”突出 显示 


看 完 这 些 示 例 ， 我 们 应 该 对 树 有 些 了 解 了 。 虽 然 这 里 只 有 TreeNode， 却 能 表示 枝 权 或 者 叶 
子 。 原 理 很 简单 ， 如 果 这 个 TreeNode 下 有 其 他 节点 ， 它 就 是 一 个 枝 权 ;如果 没 有 ， 它 就 是 一 个 
叶子 ， 从 它 前 面 的 图 标 就 很 容易 看 出 来 。 根 其 实 就 是 一 个 没有 上 级 节点 的 枝 权 。 实 际 上 ， 它 们 都 
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是 TreeNcde， 只 是 属性 不 同 而 o 
该 示例 在 05.tree 文 件 夹 下 ， 分 别 是 01-01-01.html 和 01-02-01.html。 


5.1.4 使 用 TreeLoader 获得 数据 


像 上 面 那样 获取 数据 不 仅 麻烦 ， 而 且 还 容易 出 错 。Ext .tree.TreeLoader 可 以 利用 从 后 台 
获取 的 数据 为 我 们 组 装 出 一 棵 树 来 ， 我 们 只 需要 提供 数据 ， 让 TreeLoader 完 成 数据 转换 和 装配 
节点 的 操作 。 

这 里 又 需要 用 到 JSON 和 Ajax 了 。 重 申 一 下 前 面 提 到 过 的 问题 ， 一 - 旦 涉及 Ajax， 就 需要 配合 
服务 器 ，Ajax 是 无 法 从 本 地 文件 系统 直接 取得 数据 的 。 

首先 ， 为 TreePanel 配 置 一 个 TreeLoader， 如 下 面 的 代码 所 示 。 


Var tree = new Ext.tree.TreePanel(t{ 


el: “tree'， 


loader: new Ext.tree,.TreeLoader({dataUrl: ‘01-04-01.txt'}) 


区 由- 


这 里 的 TreeLoader 仅 包含 一 个 参数 aataUr1l， 


03-03.txt 可 以 看 到 里 边 的 内 容 。 
如 下 面 的 代码 所 示 : 
{text:'not leaf'}, 


{text:'is leaf',leaf:true} 


] 


03-03 .Ext'， 这 个 aataUr1 表 示 在 树 完成 
泻 染 后 从 何 处 读 取 数据 。 为 了 演示 方便 ， 我 们 写 了 一 个 文本 文件 来 为 树 形 提供 JSON 数 据 ， 打 开 


这 是 一 个 包含 了 两 个 节点 的 数组 ， 你 可 能 会 发 现 附 加 属性 ,号 扎 奖 呈 根 
leaf :true， 这 个 属性 的 作用 将 会 在 下 面 讲 到 。 i 
如 果 现 在 刷新 页 面 ， 你 依然 只 能 看 到 根 ， 没 有 像 你 期 待 的 Dontioa 
那样 从 03-03.txt 读 取 数 据 并 显示 到 页 面 上 。 因 为 我 们 使 用 的 Inat leaf 
TreeNode 并 不 支持 Ajax， 需要 把 根 节 点 换 成 AsyncTreeNode， 时 站 not leaf 
这 样 才 可 以 实现 我 们 想 要 的 异步 加 载 效果 ， 如 下 面 的 代码 所 示 。 图 lsieef 
Var root = new Ext .tree.AsyncTreeNode | (text: ' 我 是 根 '}); en 
结果 如 图 5-5 所 示 ， 叶 子 无 限 展开 。 四 sleaf 
图 5-5 的 效果 还 是 和 我 们 预想 的 不 一 样 ， 树 的 节点 竟然 是 无 is leaf 
限 循环 展开 的 。 我 们 把 root .expand(true，true) 改 成 
root ,expand()， 避 免 节点 无 限 展开 下 去 ， 现 在 分 析 一 下 出 现 ee Mee 
这 种 结果 的 原因 。 ae 
取消 了 递归 展开 之 后 ， 树 只 展开 根 节点 的 第 一 层 节 点 ( 见 局 人 3 我 是 根 
图 5-6) 。 从 图 5-6 中 可 以 看 出 ， 我 们 得 到 的 确实 是 与 03-03.txt 文 ye 


件 里 相对 应 的 两 个 节点 。 不过, 这 两 个 节点 却 有 些 不 同 , not leaf 
节点 的 图 标 显然 是 枝 权 的 图 标 ， 如 果 点 击 前 面 的 加 号 ， 它 还 会 
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像 图 5-5 那 样 向 下 展开 。 

原因 就 在 于 AsyncTreeNode， 它 会 继承 树 形 TreeLoader 中 的 dataUrl。 当 展开 节点 执行 对 
应 节点 的 expand() 方 法 时 ， 它 会 通过 Ajax 访 问 dataUr1 指 定 的 地 址 并 获取 数据 ， 而 且 还 会 把 自 
己 的 ia 作为 参数 传递 给 aataUr1 指 定 的 地 址 。 通 过 Firebug 可 以 看 到 Ajax 请 求 的 整个 过 程 ， 而 我 们 
的 后 台 应 该 通过 节点 ia 计 算出 应 该 返回 的 数据 ，TreeLoader 会 根据 获得 的 相应 数据 为 树 形 装 配 
节点 ， 并 显示 到 页 面 上 。 

关键 就 是 这 里 ， 因 为 我 们 使 用 03-03.txt 提 供 的 数据 不 会 判断 当前 节点 的 ia， 所 以 每 次 返回 的 
数据 都 是 一 样 的 ， 这 样 树 会 无 限 循环 下 去 。 

大 家 可 能 会 问 : “为 什么 只 有 第 一 个 节点 会 无 限 循环 下 去 ， 而 第 二 个 节点 却 没有 那个 小 加 
号 ? ”这 是 因为 第 二 个 节点 不 是 AsyncTreeNode。TreeLoader 在 生成 节点 时 会 判断 数据 里 的 
leaf 属 性 ， 如 果 是 leaf :true， 就 会 生成 TreeNode, 而 不 是 AsyncTreeNode。TreeNode 不 会 自 
动 去 用 Ajax 取 值 ， 自 然 就 不 会 无 限 循环 展开 了 。 

现实 中 ， 异 步 读 取 属 性 的 节点 是 非常 好 的 一 种 方法 ， 因 为 可 能 要 保存 成 千 上 万 条 节点 记录 。 
如 果 一 次 性 全 部 装载 ， 读 取 和 演 染 的 速度 都 会 很 慢 。 如 果 使 用 异步 读 取 的 方式 ， 那 么 只 有 在 点 击 
某 一 节点 后 才 会 去 获取 子 节点 属性 并 进行 演 染 ， 极 大 提高 了 用 户 体验 。 而 且 ，EXT 的 树 本 身 有 组 
存 机 制 ， 打 开 一 次 后 ， 再 次 点 击 时 不 会 去 重复 读 取 数 据 了 ， 这 也 提升 了 响应 速度 。 

示例 在 05.tree/01-04-01.html 中 。 

下 面 我 们 再 写 一 个 从 JSON 获 取 数 据 的 示例 ， 对 前 面 所 讲 的 知识 进行 巩固 和 实践 ， 以 此 加 深 
理解 。 这 次 的 JSON 文 件 稍微 复杂 些 ， 对 应 的 保存 着 JSON 数 据 的 文件 是 01-04-02.txt。 

01-04-02.txt 的 内 容 如 下 所 示 。 


[ 

{text:'01',children:[ 
{text:'01-01',1leaf :true}, 
{text:'01-02',children:{ 

{text:'01-02-01',]leaf:true}, 
{text:'01-02-02',1leaf:true} 





J 


{text:'01-03',1leaf:true} 是 必 我 呈报 
j; 日 忆 I01 
{text:'02',leaf:true} 图 01-01 
蕊 局 01-02 
运行 结果 如 图 5-7 所 示 。 习 01-02-01 
这 也 可 以 看 作 是 在 数据 不 多 的 情况 下 一 次 加 载 所 有 数据 图 01-02-02 
的 途径 。 只 要 确保 在 所 有 叶子 节点 上 都 加 上 1leaf:true 的 属 
性 ， 就 不 会 出 现 循环 展开 的 问题 。 
示例 在 05.tree/01-04-02.html 中 。 图 5-7 异步 加 载 树 完全 展开 


5.1.5 读 取 本 地 JSON 数据 


读 取 本 地 JSON 其 实 是 使 用 TreeLoader 的 另 一 种 方式 。 因 为 有 时 树 形 的 数据 并 不 多 ， 为 了 获 
取 如 此 少量 的 数据 而 使 用 Ajax 访问 后 台 实 在 不 划算 。 可 是 ， 如 果 退 回 到 每 个 节点 都 使 用 new 来 生 
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成 ， 又 实在 太 麻 烦 了 。 那 么 ， 能 不 能 让 TreeLoader 读 取 本 地 JavaScript 中 的 JSON 数 据 ， 然 后 生成 
需要 的 树 形 节点 呢 ? 
答案 当然 是 肯定 的 。 首 先 ， 为 TreePane1 设 置 一 个 参数 为 空 的 TreeLoader， 如 下 面 代 码 所 
示 。 
Var tree = new Ext.tree.TreePanel {1 
el: 'tree', 


loader: new Ext.tree.TreeLoader |() 
六 关 ， 


然后 ， 设 置 一 个 根 节点 ， 并 为 这 个 根 节点 设置 children 属 性 ， 如 下 面 代码 所 示 。 


Var root = new ZXxXt .tree.RASsyncTreeNode1({ 
text : ' 我 是 根 '， 
children: | 
{text: ‘Leaf No. 1',1leaf: true}, 
{text: 'Leaf No. 2',leaf: true} 
] 
PEs 


这 里 有 以 下 3 点 需要 注意 。 

D 必须 设置 TreeLoader, 否则 根 节点 会 一 直 处 在 读 取 状态 , 无 法 获得 chilaren 中 定义 的 子 
加 

口 根 节点 必须 是 asyncTreeNode， 如 果 是 TreeNode， 也 无 法 生成 子 节点 。 


DO 子 节点 中 的 叶子 节点 必须 都 加 上 1eaf : true， 和 否则 也 会 一 直 显 示 读 取 状 态 。 
示例 在 05.tree/01-05-01.html 中 。 


5.1.6 与 Struts 2 进行 集成 


接 下 来 将 讨论 如 何 使 用 TreeLoader 与 Struts 2 和 Spring MVC 进 行 集成 。 

问题 来 源 于 Struts 2 提供 的 JsonPlugin 与 Spring MVC 提 供 的 JsonView 组 件 的 应 用 。 事 件 的 起 因 
是 这 样 的 ，TreeLoader 只 能 处 理 JSON 数 组 ， 也 就 是 后 台 返 回 的 数据 必须 包含 在 [] 中 。 然 而 ， 
JsonPlugin 和 JsonView 两 个 组 件 都 只 能 返回 JSON 对 象 ， 即 返回 的 数据 都 包含 在 {} 中 ， 于 是 矛盾 就 
出 现 了 。 

一 般 说 来 ， 我 们 不 应 该 去 修改 后 台 ， 直 接 使 用 JsonPlugin 和 JsonView 会 更 方便 ， 也 更 便于 以 
后 的 版 本 升级 。 这 样 一 来 ， 就 需要 修改 rreeLoader 了 。 

下 面 给 出 一 种 修改 rreeLoader 的 方法 ， 只 修改 rreeLoader 中 的 一 个 函数 ， 使 其 可 以 支持 对 
象 。 但 是 ， 这 个 对 象 的 某 个 值 必 须 包 含 数组 。 

现在 假设 后 台 生 成 的 JSON 对 和 象 如 下 面 的 代码 所 示 : 


{key: [ 
{RE 
{text:'02',1leaf:true} 
]} 


key 对 应 的 值 就 是 树 形 需要 的 节点 数据 。 接 下 来 我 们 修改 一 下 TreeLoader 函 数 ， 如 代码 清 
单 5-2 所 示 。 
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代码 清 羊 5-2” 殿 改 Treeloader 


var loader = new Ext.tree.TreeLoader({dataUrl; ‘01-06-01.txt'}); 
loader .processResponse = function(response, node, callback)}{ 
var json = response.responseText; 
try 1 
Var json = eval("{"+json+")"); 
node.beginUpdate!(); 
// 从 json 中 取得 json 数 组 


var 0 = json["key"]; 


for(var i = 0, len = o.length; i < len; i++){ 
var n = this.createNode {olil]); 
if {n)t 
nodGe.appendCchild (n}); 
} 





et 
if (typeof callback == "function")})t{ 
callback (this, node); 
} 
}catch (le)tl 
this.handijeFailure{response}; 
} 

}7 

实际 上 我 们 只 添加 了 一 行 代 码 var o = json["key*"]， 把 key 对 应 的 数组 值 取出 来 ， 其 他 的 
代码 都 没有 改变 ， 还 是 按 原来 的 方式 处 理 获得 的 数据 。 

如 果 只 有 一 处 或 两 处 用 到 树 形 ， 那 么 这 样 修改 也 就 足够 了 ， 记 得 每 次 都 要 把 key 改 成 实际 返 
回 的 值 。 如 果 还 有 更 多 地 方 需 要 进行 JSON 数 据 转 换 ， 建 议 对 TreeLoader 进 行 扩 展 ， 以 后 可 以 直 
接 引 用 扩展 后 的 TreeLoader。 

示例 在 05.tree/01-06-01.html 中 。 


5.1.7 ”使 用 JSP 提供 后 台数 据 


我 们 在 后 台 使 用 JSP， 下 面 来 看 看 如 何 判断 目前 展开 的 节点 并 进行 处 理 。 既 然 有 了 后 台 ， 就 
需要 用 到 服务 器 ， 我 们 这 里 使 用 的 是 Tomcat 。 关 于 Tomcat 的 安装 和 使 用 ， 请 参考 网 站 
www.family168.com 上 的 JSP 教 程 ， 这 里 就 不 再 鳌 述 。 

前 台 的 HTML 和 JavaScript 代 码 使 用 之 前 的 示例 ， 但 是 要 把 TreeLoader 中 的 dataUr1 改 成 我 
们 现在 用 到 的 tree.jsp， 如 下 面 的 代码 所 示 。 


Var tree = new Ext,.tree.TreePanelt{i{ 

el: 'tree', 

loader: new Ext.tree.TreeLoader({(dataUrl: '01_07_01.jsp')) 
F}3 


男 外 ， 还 要 给 root 节 点 设置 一 个 14， 这 样 后 台 才 能 知道 应 该 在 何 时 返回 根 节点 对 应 的 子 节 
点 数据 ， 如 下 面 的 代码 所 示 。 


Var root = new BEXt .tree.RAsYyYncTteeNode (1{ 
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1 
text: “我 是 根 ， 
}y 


将 roet 的 id 设置 为 '0'。 注 意 ， 树 形 中 节点 的 ia 不 要 重复 。 在 EXT 中 ， 如 果 出 现 重复 的 ia， 
就 会 出 现 问 题 。 随 后 ， 后 台 会 根据 id 来 判断 究竟 是 哪个 节点 正在 展开 ， 从 而 返回 对 应 的 数据 。 
前 台 准 备 就 绪 ， 下 面 看 一 下 后 台 01 07 01jsp 的 脚本 ， 如 代码 清单 5-3 所 示 。 
代码 清单 5-3 ”后 全 JSP 代 码 2 
<%8 page contentType="text/html;charset=utf-8"%®> 
< 


request .setCharacterEncoding ("UTF-8"); 
response.setCharacterEncoding ("UTF-8"); 


// 获得 node 参 数 ， 对 应 的 是 正在 展开 的 节点 ia 
String node = request.getParameter{"node"):; 
System,out .printintnodae):; 


String on = +, 
if ("0".equals (node)}) { 

json += "[{id:1,text:' 节 点 阿 一 '}, {iqd:2,text:' 节 点 阿 二 ' }]"，; 
} else if ("i".eguals{node)) f 

json += "{{id:11,text:;' 节 点 阿 一 一 '}, {id;12,text:' 节 点 阿 一 二 '}]"; 
} else if ("2".eguals(node})}) 1{ 

json +=“"[{id:21,text:' 节 点 阿 二 一 '] {id:22,text:' 节 点 阿 二 二 ' }]"; 
} else if ("1l".equals(node)) { 


json += “[{id:111,text:' 节 点 阿 一 一 一 '}, {id:112,text:' 节 点 阿 一 一 二 ' })*; 
} 


response.getWriter() .print (json)}; 
入 > 


要 强调 一 点 ， 因 为 Ajax 默认 使 用 UTF-8 编 码 格式 ， 所 以 我 们 的 JSP 也 要 使 用 UTF-8 编 码 发 送 数 
据 。 

其 实 ， 树 形 异 步 读 取 的 关键 是 node 参 数 。 当 某 个 节点 展开 时 ，TreeLoader 会 根据 设置 的 
dataUr1 地 址 去 后 台 读 取 数据 。 而 当 发 送 请 求 时 ，TreeLoadaer 会 把 这 个 节点 的 ia 作为 参数 一 起 
发 送 到 后 台 去 。 对 后 台 来 说 ， 只 要 获得 node 参 数 ， 就 知道 是 哪个 节点 正在 执行 展开 。 

剩 下 的 就 简单 了 ， 我 们 根据 节点 的 id 返回 对 应 的 JSON 数 据 。 返 回 的 响应 中 必须 包含 每 个 节 
点 的 ia 和 text，id 是 节点 的 唯一 标识 ，text 代 表 节 点 的 名 称 。 其 他 属性 我 们 暂时 还 没有 接触 到 ， 
稍 后 再 对 它们 进行 讨论 。 前 台 展示 树 的 代码 如 下 所 示 : 

Var tree = new Ext.tree.TreePanell(t 

el; ‘tree's 


loader: new Ext .tree.TreeLoader'({dataUrl: "OF :OTOL TJaD"i 
条 站 


Var root = new Ext .tree.AsyncTreeNode!l'{ 


Fas -0 
text : ' 我 是 根 ' 
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人 


tree.setRootNode (root); 
tree.render!(); 


root .expand (false, false); ne 
这 样 就 完成 了 树 从 后 台 读 取 数据 并 展示 的 效果 。 从 实际 操作 ey 
中 可 以 看 到 ， 展 开 节 点 时 会 提示 正在 读 取 数据 ， 读 取 成 功 后 就 会 
显示 节点 下 面 的 所 有 子 节 点 ， 如 图 5-8 所 示 。 图 5-8 ”异步 加 载 树 形 节点 


节点 不 断 向 后 台 发 送 请 求 ， 直 到 所 有 节点 都 展开 为 止 ， 无 法 实现 异步 的 效果 。 





实际 操作 中 ， 不 知道 你 是 否 注意 到 一 个 奇怪 的 现象 ， 如 图 5-9 所 示 。 
如 果 我 们 继续 展开 节点 ， 图 $-9 会 变 成 图 $-10 的 样子 。 


本 4 我 呈报 
J 3 本 ES3 交点 阅 一 
ss 站 站 阿 一 
当 门 ] 节点 阿 一 二 节点 同一 二 
当 必 导 敬 点 阿 二 晤 了 节点 阿 二 
当 门 节 点 何 二 一 习 门 节点 阿 二 一 
土 门 节点 阿 二 二 和 节点 出 三 二 
图 5-9 ”继续 异步 加 载 的 结果 图 5-10 异步 加 载 没 有 返回 子 节点 


节点 并 没有 展开 ,但 是 它们 前 面 的 加 号 图 标 消失 了 。 正 如 前 面 所 说 的 ，AsyncTreeNode 会 
根据 后 台 返 回 的 数据 生成 不 同 的 节点 。 如 果 返 回 的 子 节点 数据 包含 1eaf :true 属 性 ， 就 会 生成 
TreeNode 节 点 ， 并 标记 成 叶子 节点 。 但 是 ，TreeNode 不 能 再 自动 展开 了 。 

现在 的 情况 是 ， 这 几 个 节点 本 来 是 AsyncTreeNode， 但 当 它 们 去 后 台 读 取 数 据 时 ， 后 台 》 
有 返回 任何 子 节点 数据 。 这 时候 AsyncTreeNode 才 意识 到 自己 犯 了 错误 , 自己 很 可 能 已 经 是 叶子 
了 ， 下 面 当然 不 会 再 有 任何 数据 了 。 所 以 它 急 中 生 智 ， 扬 身 一 变 ， 把 自己 变 成 了 叶子 模样 ， 直 接 
隐藏 了 表示 展开 的 加 号 图 标 ， 这 样 它 就 变 成 了 一 个 真正 的 叶子 了 。 

虽然 AsyncTreeNode 能 自己 判断 并 生成 不 同 的 结果 ， 但 这 个 变化 过 程 却 降低 了 用 户 体 验 ， 
因为 用 户 并 不 知道 其 中 原因 。 实际 上 , 访问 后 台数 据 也 是 要 花 时 间 的 ， 即使 局 域 网 速度 很 快 ， 
也 会 消耗 服务 器 的 带宽 。 无 论 如 何 ， 让 节点 自己 判断 自己 是 不 是 叶子 ， 实 在 是 个 很 差劲 的 方 
法 5 

那 该 怎么 办 呢 ? 我 们 的 解决 方案 还 是 配置 1eaf :true。 修 改过 程 很 简单 ， 我 们 在 后 台 返 回 数 
据 时 进行 判断 。 如 果 是 叶子 ， 就 设置 为 leaf :true， 这 样 前 台 显 示 就 不 会 有 问题 了 。 修 改 后 的 
01_07_02.jsp 文 件 如 代码 清单 5-4 所 示 。 
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代码 清单 5-4 ”设置 leaf :true 


<%@ page contentType="text/html;charset=utf-8"%> 
二 第 
reauest ,SetCharacterEncoding{"UTE-8") ; 
response,.setCharacterEncoding ("UTF-8"); 


// 获得 node 参 数 ， 对 应 的 是 正在 展开 的 节点 ia 
String node = request .getParameter ("node"); 
System.out .printlni{node); 


String json = "*; 
if ("0".equals{node)) { 

json += "[{id:1,text:' 节 点 阿 一 '), {id:2,text:' 节 点 阿 二 ' }]*; 
} else if ("i"*.equals(node)) 1{ 

json +="[{id:11,text:' 节 点 阿 一 一 ', leaf;false}, {id:12,text:' 节 点 阿 一 二 ' ,leaf:true}]"; 
} else if ("2"*.equals{node)) { 

json += "[{id:21,text:' 节 点 阿 二 一 ', leaf;true}, {id:22,text:' 节 点 阿 二 二 ', leaf:true}]"; 
} else if ("ll*.equals (node}))} { 

json +="[{id:111,texct:' 节 点 阿 一 一 一 ', leaf:;true}, {iG:112,text:;' 节 点 阿 一 一 二 ', leaf:true}]"; 


1 
上 
了 


response.getWriter{) .print (json); 
千 > 


前 台 的 展示 代码 只 需 将 TreeLoader 里 的 dataUrl 改 成 01_07_02.jsp 即 可 ， 示 例 在 
05.tree/01-07-01.html 中 。 


5.2 树 的 事件 


EXT 很 奇特 的 一 点 是 ， 它 的 事件 模型 会 告诉 你 很 多 你 想 知道 的 事情 ， 比 如 哪个 节点 展开 了 ， 
哪个 节点 折合 了 , 树 节点 被 单 击 还 是 双击 了 。 而 这 一 切 在 EXT 的 事件 提醒 机 制 下 都 会 变 得 很 简单 ， 
只 需要 使 用 on 为 树 形 注册 事件 监听 器 ， 如 代码 清单 5-5 所 示 。 


代码 清单 5-5 ”监听 树 形 事件 


tree.onl"expandnode"，functionf(nodae)({ 
console.logtnoae + "展开 了 ") 

于 

tree.on{"collapsenode", function{node)t 
console.logt{node + " 折 乃 了 "); 

Et 

tree.on("ciick", function{(node)t{ 
console.1log ("你 单 击 了 J 人" + node}); 

| 

tree.on{("dblclick", function{(node){ 
console.1log ("你 双击 了 J 了" + node); 

Eh 


接 下 来 我 们 在 树 形 上 执行 单 击 操作 ， 展 开 或 折 双 其 中 的 节点 ， 如 图 5-11 所 示 。 
这 里 重点 介绍 一 下 图 5-11 中 的 Ext Debug Console， 只 有 引入 了 ext-all-debug.js 才 会 出 现 图 中 左 
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下 角 的 效果 。 因 为 如 果 使 用 alert () 进行 测试 ， 总 是 无 法 触发 双击 事件 ， 所 以 只 好 借助 它 来 显示 
效果 了 。 为 了 使 用 console.1og() 方 法 , 我 们 特意 将 以 前 的 ext-alljs 换 成 了 ext-all-debug.js。EXT2.x 
版 本 使 用 Ext .1og 来 输出 日 志 的 ， 这 样 一 来 ， 即 使 我 们 不 使 用 Firefox 和 Firebug 也 能 清楚 看 到 这 些 
日 志 了 。EXT 3.0 估 计 是 为 了 节省 性 能 ， 直 接 在 firebug 的 控制 台 输出 日 志 ， 如 图 5-12 所 示 。 


[Node ynode~16] 折 合 了 司 ; pn Cow (YTrap Errors 


你 单 击 了 [Node ynode-165] 


你 单 击 了 [Node ynode-i7] 
你 单 击 了 [Node ynode-16] 
” 





[Node ynode-16] 展 开 了 


Debug Console DOM Inspector 


图 5-11 Ext 2,x 的 debug 监 听 树 形 事件 


多 | 控制 台 v HIM 95 民 刷 ,00M 宰 扫 

滞 除 ” 投 吕 
4 POST http:/ /localhost:00860 /jsp-exampiles /ext/examplies/mytree/01-04-01.txt 
[Yoda 0] 斌 天 
3 POST http:/ /iocalhost-80680 /jsp-examples/ext /examples/mytree/01-04-01.bxt 
[Bode xznode-7T] 乒 开 T 


图 $-12 ”Ext 3.0 的 debug 监 听 树 形 事件 


其 实 on ( "eventName") 的 用 法 非常 简单 ， 它 只 是 把 一 个 函数 绑 定 到 一 个 事件 上 ， 而 我 们 只 
要 知道 这 个 事件 的 名 字 就 可 以 了 。 当 这 个 事件 发 生 时 ，EXT 会 找到 所 有 绑 定 好 的 函数 ， 然 后 逐个 
执行 。 如 此 简单 的 原理 却 实现 了 如 此 绚丽 的 功能 ， 我 们 只 需要 到 API 文 档 中 查找 究竟 需要 处 理 哪 
些 事件 ， 然 后 使 用 on 进行 绑 定 就 可 以 了 。 

示例 在 05.tree/02-01.html 中 。 


5.3 ”右键 菜单 


树 形 弹 出 的 右键 菜单 效果 如 图 5-13 所 示 。 

效果 似乎 比较 简单 ， 但 实现 过 程 却 比较 复杂 。 当 然 ， 它 也 依托 了 EXT 的 事件 模型 。 我 们 要 注 
册 一 个 名 为 contextmenu 的 事件 ， 当 这 个 事件 发 生 时 ， 弹 出 自己 定制 的 菜单 。 

下 面 我 们 来 讨论 一 下 实现 的 具体 步骤 。 
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习 直 我 是 根 
忆 |_ jnat leaf 


司 is 有 水 事 点 我 哦 | 


条: 司 ~ 区 | 
1 、 我 视 击 中 了 , 啊 ，，， 


Te 








图 5-13 ” 树 形 弹出 的 右键 菜单 效果 


(1) 制作 自 定义 菜单 ， 如 下 面 的 代码 所 示 。 


var contextmenu = new Ext.menu,.Menul(t 
iG: 'theContextMenu', 
items: [{ 
text: “有 本 事 点 我 哦 ! '， 
handler: function(): 
alert { ' 我 被 击 中 了 ， 啊 。。。 ' ) ; 
} 
}] 
1 
像 这 样 创建 一 个 菜单 ， 菜 单 里 仅 有 一 项 ， 我 们 为 这 个 菜单 设置 好 单 击 时 的 处 理 函 数 ， 这 些 都 
是 为 右键 事件 做 的 准备 工作 。 


(2) 绑 定 contextmenu 事 件 ， 如 下 面 的 代码 所 示 。 


tree.on("contextmenu", function(node, e}t{ 
e.preventDefault(); 
node.select(); 
contextmenu.showAt (e.getrXY{)); 


这 个 事件 会 向 绑 定 的 监听 函数 传递 两 个 参数 : 当前 点 中 的 节点 和 事件 对 象 。 实 际 上 ， 其 他 事 
件 也 会 向 绑 定 的 监听 函数 传递 这 两 个 参数 ， 我 们 通常 只 使 用 第 一 个 参数 。 

首先 ， 调 用 e .preventDefault ()。 这 个 函数 的 作用 是 防止 浏览 器 弹出 它 默认 的 功能 菜单 ， 
否则 会 一 次 弹出 两 个 菜单 : 我 们 自 定义 的 右键 菜单 和 系统 功能 菜单 ， 这 显然 乱 套 了 。 

然后 ， 我 们 调用 node .select () 选中 当前 节点 。 因 为 右键 单 击 事件 昌 然 发 生 了 ， 但 当前 节 
点 可 能 没有 处 于 选中 状态 ， 我 们 让 它 变 成 选中 状态 ， 可 以 避免 以 后 会 出 现 的 问题 。 

showAt (e.getXY()) 方 法 通过 右键 事件 e 获 得 当前 鼠标 的 坐标 , 右键 菜单 应 该 显示 在 这 个 坐 
标 下 ， 看 上 去 就 像 是 从 节点 上 弹出 来 的 。 

至 此 , 右键 菜单 的 监听 都 已 经 完成 ， 我 们 在 弹出 的 右键 菜单 外 任意 点 击 -- 下 鼠标 , 菜单 应 该 
会 隐藏 起 来 。 但 也 存在 意外 情况 ， 有 时 候 菜 单 还 没有 隐藏 起 来 我 们 就 要 执行 其 他 操作 ， 比如 展开 
树 形 中 的 一 个 节点 。 此 时 如 果菜 单 无 法 消失 就 会 很 碍 眼 ， 这 时 我 们 需要 手工 调用 contextmenu. 
hide() 函数 让 右键 菜单 消失 。 把 该 功能 代码 添加 到 实现 展开 、 折 又 操作 功能 的 代码 之 前 即 可 。 
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示例 在 05.tree/03-01.html 中 。 


5.4 ”修改 节点 的 默认 图 标 


实际 上 ， 每 个 树 形 节点 都 有 icon 和 iconcls 属 性 ， 它 们 负责 指定 节点 的 图 标 。 

现在 我 们 来 修改 树 形 中 节点 的 图 标 。 无 论 是 通过 new 手 工 创建 的 节点 , 还 是 通过 JSON 读 取 到 
的 节点 ， 它 们 的 设置 方式 都 是 一 样 的 。 

下 面 是 使 用 icon 的 方法 ， 如 下 面 的 代码 所 示 。 


Var root = New Ext .tree,TreeNode{i 
txte TOON 
icon: 'user_female.png'’ 

}); 


下 面 是 使 用 iconc1ls 的 方法 ， 如 下 面 的 代码 所 示 。 


Var nodel = new Ext.tree.TreeNodet{' 
Ports wiEcGoONneLes. 
iconCls: 'icon-male'’ 

}}); 


使 用 iconcls， 我 们 还 需要 在 HTML 中 添加 对 应 的 CSS 定 义 ， 如 下 面 的 代码 所 示 。 


.XxX-tree-node-leaf .icon-male { 
background-image: url{user_male.png) 





} 


这 里 有 一 个 地 方 需要 注意 ，iconcls 对 应 的 是 icon-male， 但 写 在 CSS 里 要 用 层 丛 的 写法 定 
义 .x-tree-node-leaf 下 的 .icon-male， 否 则 CSS 会 不 起 作用 。 
当然 也 可 以 同时 使 用 iconcls 和 icon 两 种 方法 ， 如 下 面 的 代码 所 示 。 


Var node2 = new Ext.tree.TreeNodet{t{ 
下 己基 全 Loo +» IconCie,, 
icon: ‘user_female.png', 
iconCls: 'icon-male' 

下 


两 种 方法 都 可 以 达到 我 们 的 目的 《 见 图 5-14)》 。 不 过 ， 比 较 一 

-下 两 种 方法 都 使 用 的 情况 ， 到 底 哪 种 方法 的 优先 级 更 高 呢 ? ge ee 
结果 是 icon 效 胜 ， 这 其 实 很 好 理解 。iconcls 只 能 定义 背景 。。。 局 con + concs 

图 片 ，icon 设 置 的 是 IMG 的 SRC 部 分 ，icon 中 设置 的 图 片 会 把 背 

景 部 分 挡住 。 当 然 ， 实 际 使 用 时 我 们 只 会 选择 其 中 的 一 个 。 
示例 在 05.tree/04-01.html 中 。 


5.5 ”从 节点 弹出 对 话 框 


实际 上 ,我们 从 事件 中 获得 的 node 只 是 一 个 对 象 ， 而 不 是 HTML 中 的 一 个 实际 的 DOM 元 素 ， 
所 以 不 能 直接 用 animEl :node 来 实现 飞 出 效果 。 





图 5-14 ” 自 定 义 节点 图 标 
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EXT 里 的 树 节 点 都 遵从 MVC 设 计 , 所 以 要 找到 对 应 的 DOM 元 素 , 应 该 使 用 节点 的 View 部 分 。 


在 TreeNode 里 ， 这 部 分 叫做 UI。 树 形 节点 的 UI 又 包括 好 几 部 分 ， 缩 进 用 的 空白 、 节 点 之 间 的 连 
接线 、 节 点 展开 和 折 有 登 的 图 标 ， 以 及 显示 的 标题 。 


下 面 的 代码 可 以 让 弹出 的 对 话 框 看 起 来 像 是 从 标题 上 飞 出 “32s 


来 的 ， 如 图 5-15 所 示 。 et 和 
你 单 击 了 [Node xnode 昌 ] 
tree.on{"click", function(node){ 


Ext .Msg .show!t{'{ 
ite 打下 图 5-15 飞 出 来 的 对 话 杠 
msg: * 你 单 击 了 ”+ node, 
animEl: node.ui,textNode 
下 
3 


示例 在 05.tree/05-01.html 中 。 


5.6 节点 提示 信息 


习 人 我 足 根 
节点 提示 信息 的 效果 如 图 5-16 所 示 。 习 口 ]01 
当 把 鼠标 停留 在 某 个 节点 的 上 方 时 ， 便 会 出 现 提 示人 信息。 为 了 司 02 
实现 这 种 效果 ， 要 对 提供 的 JSON 数 据 做 一 些 修 改 。 在 JSON 中 添加 02 
对 应 的 节点 提示 内 容 ， 给 每 个 节点 数据 都 加 上 at ip:'xxx' 参数， 
然后 节点 就 可 以 显示 提示 信息 了 ， 如 代码 清单 5-6 所 示 。 
代码 清单 5-6 ”提示 信息 
[ 


图 5-16 ”提示 信息 


{text:'01',gqtip: '01' ,children: 
{text:'01-01',gqtip:'01-01i',1leaf:true}, 
{text:'01-02',gqtip:'01-02',children:! 

{text:'01-02-01' ,qtip:'01-02-01',1leaf:true}, 


{text:'01-02-02' ,qtip:'01-02-02',1leaf:true} 
jk 


一 


{text:'01-03',qtip: '01-03',1leaf:true} 
] }， 


{text:'02',gqtip:'02',1leaf:true} 
] 


不 过 ， 仅 仅 为 树 形 的 JSON 添 加 这 些 参数 还 不 能 在 页 面 上 显示 提示 信息 ， 需 要 先 在 JavaScript 
中 对 EXT 的 提示 功能 进行 初始 化 。 
// 开启 提示 功能 


Ext .QUuickTips.init(); 


上 面 这 行 代码 必须 在 其 他 功能 加 载 前 完成 , 建议 写 在 onReady 函 数 的 第 一 行 。 完 整 代码 如 下 : 


Ext .onReady (function() 1 


// 开启 提示 功能 
Ext .QuickTips. init () ， 
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Var tree = new Ext .tree,TreePaneliI(! 

el: tree ' ， 

loader: new Ext.tree.TreeLoader( {dataUrl: '06-01.txt"}) 
}}? 


Var root = new Ext.tree.AsyncTreeNode{{ 
de Ot 
text: ' 我 是 根 ' 

}); 


tree.setRootNode (root):; 
tree.render (); 


root .expand (); 


})s 
示例 在 05.tree/06-01.html 中 。 


5.7 为 节点 设置 超 链接 


虽然 我 们 完全 可 以 监听 click 事 件 , 但 是 直接 在 节点 树 形 中 设置 超 链接 的 地 址 也 是 一 个 好 主 
意 ， 这 是 很 多 人 都 想 实 现 的 功能 。 
现在 让 我 们 给 节点 加 上 href 属 性 ， 如 下 面 的 代码 所 示 。 


{text:'01-01' ,gtip:'01-01',1leaf:true,href:'07-01.html'} 


添加 上 面 的 代码 后 ， 点 击 01-01 节 点 就 会 弹出 03-10a.html 页 面 。 不 过 这 种 配置 会 修改 当前 页 
和 面 ， 怎 么 才能 打开 另外 一 个 窗口 呢 ? 大 家 可 能 会 立即 想到 用 target。 不 过 很 可 惜 ， 树 形 中 的 
target 参 数 名 称 男 有 他 用 ， 这 里 我 们 需要 配置 的 参数 名 为 hrefTarget， 如 下 面 的 代码 所 示 。 


{text:'02',qtip:'02',1leaf:true,href:'07-01.html',hrefTarget:'_blank'} 


这 样 的 href 和 hrefTarget 组 合 确保 我 们 可 以 在 正确 的 地 方 打 开 正 确 的 网 页 ， 所 有 参数 都 可 
以 通过 JSON 获 得 。JSON 数 据 如 下 所 示 : 


[ 





{text:'01',qtip: '01',children:[ 
{text:'01-01',qtip:'01~-01',1learf:true,href:'07-01.html'}), 
{text:'01-02',gtip:'01-02',children:[ 

{text:'01-02-0i',aqtip: '01-02-01', leaf:true,href: '07-01.htmil'}, 
{text:'01-02-02',qtip:'01-02-02',1leaf:true,href:'07-01.html'} 
上 
{text:'01-03',atip:'01-03', leaf:true,href:'07-01.html':)} 
] )， 
{text:'02',qtip: '02',1leaf:true,href:'07-01.html',hrefTarget:'_ blank'} 
] 


前 端 展示 的 代码 只 需 在 之 前 的 例子 基础 上 ， 将 TreeLoadez 的 aataUrl1 属 性 修改 为 07-01 .txt 
即 可 。 
示例 在 05$.tree/07-01.html 中 。 
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5.8 ”直接 修改 树 节点 名 称 


从 传统 操作 的 角度 来 考虑 ， 如 果 我 们 需要 修改 一 个 节点 的 名 称 ， 必 须 先 选择 这 个 节点 ， 然 后 
单 击 节点 旁边 的 修改 按钮 ， 页 面 会 跳 转 到 一 个 修改 页 面 。 在 这 个 修改 页 面 中 ， 我 们 修改 对 应 的 数 
据 ， 然 后 再 提交 。 在 显示 出 一 个 操作 成 功 的 页 面 后 ， 再 次 回 到 显示 树 的 页 面 ， 这 样 才能 看 到 修改 
后 的 结果 。 
其 实 我 们 只 希望 修改 节点 的 标题 ， 效 果 如 图 5-17 所 示 。 
了 :301 
光 01.01 
本 :01-02 
党 01.02.01 
习 01.02-02 


se es 
ee | 


Tr 


图 5-17 编辑 节点 的 文本 内 容 


单 击 标题 就 可 以 修改 ， 修 改 完了 ， 按 下 Ctrl 键 就 完成 了 整个 修改 过 程 。 

代码 非常 简单 ， 不 需要 大 的 修改 ， 只 需要 为 树 形 创建 一 个 TreeEditor， 再 把 TreePanel 放 
进去 即 可 ， 如 下 面 的 代码 所 示 。 

Var treeEditor = new Ext.tree.TreeEditor{tree, { 


allowBlank ; failse 
| 


接 下 来 介绍 一 下 上 面 示例 中 参数 的 作用 。 第 一 个 参数 tree 就 是 刚才 提 到 的 Treepanel。 
allowBlank 属 于 数据 校 验 部 分 ， 这 个 属性 和 前 面 提 到 的 TextField 等 控件 的 al lowBlank 属 性 的 作 
用 一 样 ， 都 是 指 输入 值 不 允许 为 空 。 至 于 为 什么 不 能 为 空 ， 我 们 可 以 想象 一 下 ， 一 个 没有 名 字 的 
节点 会 是 什么 样子 。 

这 就 是 我 们 需要 的 所 有 东西 ,有 了 它们 就 可 以 自由 修改 树 形 节点 的 标题 了 。 完 整 的 代码 如 下 
所 示 : 


Var ‘tree = new Ext.tree.TreePanel{t 

el: ‘tree', 

loader: new Ext.tree.TreeLoader{{dataUr]l: ‘06-01 .txt'})} 
3 


Var treeEditor = new Ext.tree.TreeEditor(tree, 1 
allowBlank: false 

})? 

Var root. = new EX .tree.AsyncTreeNode({ 
Los BO 
text: 我 是 根 ， 

by 


tree.setRootNode {root); 
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tree.render(}; 


root .expand {}; 


示例 在 05.tree/08-01.html 中 。 

我 们 通过 绑 定 事件 还 可 以 对 TreeEditor 实 现 更 多 控制 ， 相 关 的 事件 列举 如 下 。 

口 on ("beforestartedit"): 这 个 事件 让 我 们 控制 是 否 允 许 编辑 当前 节点 。 我 们 用 自己 的 
方式 判断 node 的 属性 ， 如 果 满 足 某 个 条 件 ， 比 如 leaf : false， 就 不 允许 编辑 。 操 作 很 简 
单 ， 返 回 false 即 可 ， 如 下 面 的 代码 所 示 。 


treeEditor.on('"beforestartedit", function{treeEditor})t 
return treeEditor.editNode.isLeaf (); 
}})5 


在 枝 干 节点 和 叶子 节点 上 单 击 就 可 以 看 到 不 同 的 效果 。 [ 涡 
Q on ("complete"): 完成 修改 后 ， 按 下 Enter 键 时 就 会 产生 这 个 事件 。 我 们 可 以 在 监听 函数 
中 得 到 修改 后 的 数据 ， 如 下 面 的 代码 所 示 。 


上 reeEditor .on(t"complete"，function(creeEQitor) 
alert (上 treeEditor.eGirNoae .ext ) : 
Fs 


这 里 的 editNode .text 是 我 们 修改 之 前 的 结果 。 


示例 在 05.tree/08-02.html 中 。 
5.9 树 形 的 拖 放 
如 果 想 让 树 的 节点 可 以 自由 拖 动 ( 见 图 5-18) ,创建 TreePanel pT 
时 设置 enableDD:true 即 可 。 不 过 ， 直接 设置 enableDD:true 属 性 jEI301 | 
只 能 实现 叶子 与 枝 干 和 根 之 间 的 拖 放 ， 叶 子 不 能 拖 放 到 叶子 下 。 完 on ; 
Var tree = new Ext .tree.TreePanelitt{ 司 o2 a 
el: ‘'tree', at (J01-02 
enableDD: true, wn ne hr 
an loader: new Ext.tree.TreeLoader({dataUrl: ‘'06-0i.txt'}) 图 5-18 ” 拖 放 树 形 节 点 


Var root = new Ext.tree.AsyncTreeNode!({ 
Las A 
text: ' 我 是 根 ' 


tree.setRootNode (root): 
tree.rendert{}; 


root .expand():; 


之 后 的 小 节 里 的 拖 放 都 是 在 上 面 的 代码 中 添加 相应 的 拖 放 事件 和 参数 配置 。 
示例 在 0$.tree/09-00.html 中 。 
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5.9.1 节点 拖 放 的 3 种 形式 
当然 ， 拖 (drag) 就 是 把 一 个 节点 拖 起 来 ， 拖 哪个 节点 都 是 一 样 的 。 不 过 放 (〈drop) 就 复杂 


些 ， 所 以 说 EXT 为 拖 放 提供 3 种 形式 还 是 有 道理 的 。 
DO append。 放 下 去 的 节点 会 变 成 被 砸 中 的 节点 的 子 节点 ， 最 后 形成 的 是 父子 关系 。appena 
的 标记 是 一 个 绿色 的 加 号 图 标 ， 如 图 $-19 所 示 。 
Q above。 放 下 去 的 节点 与 目标 节点 是 兄弟 关系 ， 放 下 去 的 节点 排行 在 前 。above 的 标记 是 
一 个 箭头 和 两 个 短 横 线 ， 如 图 $-20 所 示 。 
口 below。 放下 去 的 节点 与 目标 节点 还 是 兄弟 关系 , 不 过 这 次 放下 去 的 节点 排行 在 后 。 below 
的 标记 图 标 和 above 的 标记 图 标 恰好 相反 ， 如 图 5-21 所 示 。 
EreryY 呈 I 和 R00 2a | 
图 mw | 习 01-0 | O00 | 
| 
| 司 o i 图 2 .J | 
图 $-19 append 拖 放 图 5-20 ”above 拖 放 图 5-21 below 拖 放 
TreePanel 中 有 很 多 事件 与 拖 放 有 关 ， 通 过 它们 ， 我 们 可 以 把 节点 从 树 的 顶端 拖 到 底 端 。 上 
面 我 们 只 介绍 了 几 个 最 常用 的 。 


5.9.2 ”叶子 不 能 append 


在 拖 放 时 有 没有 发 现 叶 子 节点 不 能 append? 这 是 因为 EXT 内 部 有 -一些 限制 ， 如 果 节 点 包含 
leaf :true 参 数 ， 就 不 能 用 拖 放 的 方式 添加 子 节点 。 这 个 限制 明显 不 合理 , 但 为 了 保持 版 本 稳定 ， 
最 好 不 要 修改 源 代码 ， 因 此 我 们 还 是 使 用 事件 解决 这 个 问题 。 

我 们 需要 的 事件 是 nodedragover， 当 你 拖 动 个 某 个 节点 经 过 另外 一 个 节点 的 顶部 时 就 会 触 
发 这 个 事件 。 当 这 个 节点 是 叶子 时 ， 我 们 就 可 以 进行 下 面 的 操作 ， 从 而 突破 EXT 不 允许 在 叶子 节 
点 上 添加 子 节点 的 限制 ， 如 下 面 的 代码 所 示 。 

// 拖 放 判断 


ree.onft*nodedragover"，functionfe){ 
Var nN = e.target; 
if tneafy. { 
n.leaf = false; 
} 
return true; 
用 光 - 


事件 发 生 以 后 ， 会 向 绑 定 的 函数 发 送 一 个 参数 e，e.target 是 当前 鼠标 指针 经 过 的 节点 。 我 
们 先 判断 n. leaf 是 否 为 true, 如 果 为 Erue, 就 说 明 这 个 节点 是 叶子 节点 , 对 它 的 操作 就 是 让 leaf 
属性 变 成 false， 然 后 就 可 以 为 这 个 节点 添加 子 节 点 了 。 

示例 在 05.tree/09-02-01.html 中 。 
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5.9.3 判断 拖 放 的 目标 
nodedrop 事 件 是 拖 放 的 节点 放下 去 时 触发 的 ， 如 下 面 的 代码 所 示 。 


tree.on("nodedrop", function(e}{ 
Ext .Msg.alert (' 提 示 '，' 我 们 的 节点 ' + e.dropNode + ' 掉 到 了 ' + e.target + ' 上 ， 
掉 落 方式 是 ' + e.point) ; 
本 


这 里 充分 利用 了 事件 发 生 时 传递 过 来 的 参数 : e.aropNode 是 正在 拖 放 的 节点 ，e.Earget 是 
放下 去 碰 到 的 节点 ，e.point 是 放下 去 的 方式 〈append、above、below) 。 
通过 这 些 数据 , 我们 就 可 以 知道 当前 节点 的 位 置 和 状态 ， 从 而 计算 出 数据 并 通过 Ajax 发 送 给 
台 ， 让 后 台 对 节点 的 数据 进行 更 新 。 下 面 我 们 来 实践 一 下 ， 再 复习 一 下 EXT 里 如 何 使 用 Ajax 传 
输 数据 。 在 原来 抑 放 代码 的 基础 上 添加 Ajax 部 分 的 代码 ， 如 代码 清单 5-7 所 示 。 
代码 清单 5-7 拖 放 事件 
tree.on{({"nodedrop", function(le}t 


Ext .Msg .alert (' 提 示 ' ，' 我 们 的 节点 ' + e.dropNode + ' 掉 到 了 ' + e.target + '.|:，, 
掉 落 方式 是 ' + e.point); 





Var item = { 
dropNode: e.dropNode.id, 
target: e.target.id, 
point: e.point 


Ext .lib.Ajax.request{ 
"POST', 
"O90 Olja, 
{success: function(response)!l 
Ext .MSG .alert (， 信息 '， response.responseText}); 
},failure: function()}t{ 
Ext .Msg.alert ("错误 "， "与 后 台 联 系 时 出 现 了 问题 "); 
}}, 
‘data=' + encodeURIComponent (Ext .encode (item)) 
) ; 
由 


实际 上 ， 这 里 的 Ext .1ib.Ajax 并 非 EXT 的 一 部 分 。 为 什么 这 样 说 呢 ? 之 前 我 们 也 提 到 过 ， 
EXT 是 基于 其 他 JavaScript 基 础 工具 库 建 立 起 来 的 组 件 库 ， 很 多 底层 功能 都 会 利用 这 些 JavaScript 
基础 工具 库 的 功能 , Ajax 就 是 其 中 之 一 。 不 信 你 可 以 去 找 找 , Ext .1ib.Ajax 的 定义 写 在 ext-base.js 
里 ， 而 不 是 ext-all.js 里 。 如 果 你 使 用 了 其 他 的 适配器 ，Ext .1ib.Ajax 就 定义 在 其 他 的 适配器 中 。 
只 要 这 个 Ext .1ib.Ajax 的 名 字 不 变 ， 具 体 的 内 部 实现 都 是 由 你 选择 的 适配器 决定 的 。 

如 果 你 对 底层 没有 太 大 兴趣 ， 只 要 会 用 这 个 Ext .1ib.Ajax 就 可 以 了 ， 在 此 我 们 只 介绍 它 的 
用 法 。 

我 们 调用 了 request () 函数 ， 它 包含 4 个 参数 。 请 注意 ， 包 含 success 和 failure 的 一 大 串 
JSON 对 象 其 实 只 是 一 个 参数 。 

第 一 个 参数 : ,POST ' 代 表 HTTP 协 议 的 方法 。 如 果 你 对 HTTP 协 议 并 不 了 解 ,请 选择 ' POST '， 
这 样 可 以 避免 中 文 参数 乱码 和 缓存 方面 的 问题 。 

第 二 个 参数 : '09_03_01.jsp' 是 请 求 的 URL。 
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第 三 个 参数 被 称 为 回调 函数 。 之 所 以 叫 回 调 函 数 ， 是 因为 这 里 定义 的 函数 会 在 Ajax 执 行 成 功 
或 失败 后 被 调用 。{success:fn, failure:fn} 里 包含 两 个 值 ，success 对 应 的 函数 会 在 请 求 成 
功 后 调用 ， 而 failiure 对 应 的 函数 会 在 请 求 失败 后 调用 。 

这 里 的 成 功 和 失败 与 数据 库 访问 的 成 功 或 失败 完全 不 一 样 , 不 要 用 业务 标准 来 判断 操作 是 否 
成 功 。Ajax 的 成 功 或 失败 在 于 HTTP 响 应 的 状态 码 是 否 等 于 200。 

或 许 有 人 还 不 了 解 HTTP, 在 此 简单 介绍 一 下 。 当 使 用 浏览 器 访问 页 面 时 , 如 果 没 有 返回 “404 
找 不 到 页 面 ”或 “500 服 务 器 内 部 错误 ”等 信息 ， 就 表明 请 求 成 功 。Ajax 只 能 分 辨 出 这 种 响应 错 
误 ， 至 于 后 台 的 业务 操作 是 否 成 功 ， 就 需要 自己 编写 代码 根据 后 台 返 回 的 具体 信息 进行 判断 了 。 

示例 里 的 failure 很 简单 ， 只 弹出 错误 提示 。success 则 稍微 复杂 一 些 ， 因 为 它 有 一 个 
response 参 数 。 这 个 response 参 数 表示 响应 对 象 ， 其 中 包含 响应 状态 和 响应 内 容 等 信息 ，EXT 
帮 我 们 把 这 些 都 封装 好 了 。 例 如 ， 我 们 这 里 通过 response .responseText 获 得 的 就 是 文本 形式 
的 返回 信息 。 如 果 需 要 XML 格 式 的 返回 信息 ， 可 以 使 用 response.responsexML， 大 家 可 以 自 


一 下 
第 四 个 参数 是 发 送 给 后 台 的 参数 ， 格 式 为 namel=valuel&name2=value2。 至 于 为 什么 用 
encodeURIComponent (Ext .encode (item) )， 一 方面 是 因为 Ext .encode () 会 把 JSON 转 换 成 字 


符 串 ， 另 外 一 方面 是 为 了 对 参数 进行 编码 ， 避 免 出 现 非法 字符 ， 这 是 通用 方式 。 

09_03_01.jsp 的 后 台 脚 本 〈 见 代码 清单 5-8) 非常 简单 ， 只 是 获得 了 参数 ， 然 后 直接 返回 给 
前 台 。 实际 环境 中 ,需要 先 对 字符 串 进行 解析 ， 获 得 自己 需要 的 数据 并 进行 处 理 。 这 里 只 是 演示 ， 
就 不 详细 讲解 了 。 
代码 清单 5-8 ”处 理事 件 的 后 台 JSP 代 和 码 

<$%@ page contentType="text/html;charset=utf-8"%> 

< 名 

request .setCharacterEncoding ("UTF-8"); 


response.sertCharacterEncoding ("UTF-8"); 


String data = request .getParameter ("data"); 
System.out .printlnl(data}; 


response.getWriter{) .print (data}): 


$%> 
最 后 的 结果 就 是 这 样 ， 每 次 拖 放 都 会 向 后 台 发 送 数 据 ， 然 后 前 台 显示 返 回 的 响应 结果 ( 见 图 
5-22 )。 
剑 姑 x 
. {ihopNode Tynode 23", target" ynode 22" “pont"i append 
Ll 
图 5-22 拖 放 事件 
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示例 就 在 05.tree/09-03-01.html 中 。 


5.9.4 树 之 间 的 拖 放 

我 们 可 以 在 一 棵 树 内 部 进行 拖 放 ， 也 可 以 在 两 棵 树 之 间 实 现 拖 放 。 但 Garag 和 drop 并 不 一 定 
同时 存在 , 既 可 以 使 用 enablepDD:true, 也 可 以 单独 使 用 enableprag 或 enableDrop 分 别 指定 一 
棵 树 支 持 drag 或 是 drop。 如 此 一 来 ， 可 以 限制 用 户 只 能 从 一 棵 树 上 拖 到 男 一 棵 树 上 ， 如 代码 清 
单 5-9 所 示 。 


代码 清单 5-9 树 之 间 的 拖 放 


Var 七 reel = new Ext.tree.TreePanel(t{ 
el: treel', 
enabljeDrag: true, 
loader: new Ext.tree.TreeLoader ({dataUr]: '06-01.txt'}) 





Var tree2 = new Ext.tree.TreePanel({ 
el: 'tree2', 
enabieDrop: true, 
loader: new Ext.tree.TreeLoader{{dataUrl: '06-01.txt'}) 


参考 上 面 的 设置 ， 在 treel 里 使 用 enableDrag，tree2 里 使 用 enableDrop， 用 户 只 能 将 
creel 里 的 节点 拖 到 tree2 上 。 我 们 禁用 了 树 本 身 的 拖 放 ， 也 不 允许 将 Eree2 中 的 节点 拖 放 到 
creel 里 。 

示例 在 05.tree/09-04-01.html 中 。 


注意 ” 树 之 间 的 拖 放 最 好 只 是 将 tree1 的 枝 和 叶 拖 放 到 tree2 上 去 ， 如 果 将 根 也 拖 过 去 的 话 会 出 错 。 
虽然 把 根 拖 2 次 也 能 拖 过 去 ， 但 是 不 建议 这 样 做 。 


5.10 树 形 过 滤器 TreeFilter 


如 果树 的 节点 过 多 ， 用 户 可 能 需要 执行 搜索 操作 ， 从 而 过 滤 掉 不 需要 的 节点 。 这 时 需要 用 到 
Ext .tree.TreerFilter, 可 以 使 用 它 提供 的 函数 判断 哪些 节点 需要 显示 ， 哪些 节点 不 应 该 显示 。 
刚 打开 页 面 时 ， 我 们 会 看 到 树 中 显示 了 所 有 的 节点 〈 见 图 $-23) ， 按 下 “只 显示 “02”” 按 





钮 就 会 看 到 图 5-24 所 示 的 结果 。 

) 根 

证 D1 be y 根 | 灿 
的 01-02 jy02 
En 01-5 习 02.01 
02.01 守 |02-02 
缮 人 | 02-03 

全部 昌 录 | ”认可 入 “oan | 全 部 显示 | 
图 $5-23 ”过 滤 之 前 图 5-24 过滤 之 后 
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10-01.html 中 的 JavaScript 代 码 如 代码 清单 5-10 所 示 。 
代码 清 半 5-10” 树 形 过 滤 右 


Var tree = new Ext.tree.TreePanel ({ 
loader: new Ext.tree.TreeLoader!(t{ 
dataUrl:; ‘'10-01.txt'"' 
})， 
root: new Ext .tree.AsyncTreeNodel(! 
A 
text: ' 根 ' 
})， 
autoHeight: true, 
renderTo: 'tree' 
jy 


tree.expandAll (); 


Var treeFilter = new Ext.tree.Treerilter(tree, { 
clearBlank: true, 
autoClear: true 

Er 


Ext .get{'clearAlli') .on('click', function{) { 
treeFilter.cliear!{); 

}}; 

Ext .get('select'} .on{t'click', function(} { 
treeFilter.filter('02'); 

js 


同时 在 html 页 面 中 创建 两 个 按钮 ， 代 码 如 下 所 示 : 


<button id="clearAll"> 全 部 显示 </button> 
<button id="select"> 内 显示 "02"</button> 


JavaScript 代 码 中 的 new Ext.tree.TreeFilter (tree, {]}) 将 TreePanel 当 作 参 数 传 入 
TreeFilter。 执 行 这 样 的 绑 定 之 后 ， 通 过 TreeFilter 执 行 的 任何 操作 都 可 以 直接 反应 到 
TreePanel 上。 第 二 个 参数 是 TreeFilter 所 和 需 的 附加 参数 ， 这 个 参数 会 在 下 面 讨论 。 

下 面 , 我 们 要 监听 两 个 按钮 的 单 击 事件 。 单 击 第 一 个 按钮 时 ， 执 行 LreeFilter .clear() 清 
空 过 滤 条 件 ， 这 就 会 让 树 形 显示 出 所 有 节点 ; 单 击 第 二 个 按钮 会 过 滤 所 有 名 称 中 包含 02' 内 容 的 
节点 。 注 意 ， 它 会 先 过 滤 上 层 节点 ， 如 果 上 层 节 点 不 符合 条 件 ， 那 么 它 不 会 去 过 滤 该 层 节点 的 子 
节点 。 

现在 我 们 来 看 一 下 TreeFilter 中 使 用 的 参数 。 

口 clearBlank: 如 果 查 询 的 字符 串 是 空 字符 串 ， 就 执行 clear ()。 

口 reverse: 这 个 参数 用 于 反 向 操作 过 滤 条 件 ， 就 是 在 filter('aata') 时 显示 所 有 不 符合 

过 滤 条 件 的 节点 。 但 是 官方 代码 中 存在 一 个 问题 ， 为 了 让 它 可 以 正常 运行 ， 需 要 把 
TreeFilter,js 的 第 77 行 中 的 “if(!im 11 rv){2” 改 成 “if(!(merv)){”。 
D autoclear: 每 次 过 滤 之 前 先 执 行 clear ()， 否 则 会 在 上 次 过 滤 结 果 的 基础 上 进行 查询 。 
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0 remove: 会 删除 不 符合 过 滤 条 件 的 节点 ， 这 样 就 不 能 使 用 clear () 恢复 为 过 滤 之 前 的 状 
态 了 。 
最 后 来 看 一 段 有 用 的 代码 ， 它 来 自 docs/resources/docs.js( 运 行 结果 如 图 5-25 所 示 ) ， 可 以 根 
据 用 户 输入 的 条 件 对 树 进 行 过 滤 。 
如 果 我 们 查询 “-02”， 就 会 显示 包含 “-02” 的 节点 ， 如 图 $-26 所 示 。 


-一 一 一 一 





己 < 司 根 

司 驴 301 
辕 01-01 PE 
习 01-02 i 
习 01-03 电 当 要 

43302 3 0 
习 02-01 国 01-02 
习 02-02 导 ;- 02 
恒 02.03 色 02-02 

图 $-25 ”模糊 过 滤 之 前 图 $-26 ”模糊 过 滤 之 后 


这 个 示例 有 如 下 3 大 特点 。 
0 监听 输入 框 的 keyup 事 件 , 每 次 按键 之 后 都 会 重新 过 滤 树 形 中 的 节点 , 如 下 面 的 代码 所 示 。 


// 按键 后 触发 事件 
field.on('keyup', functiont{te) { 
var text = field.dom.value:; 


} 
0 进行 过 滤 时 会 自动 避 开 非 叶 子 节点 ， 这 样 才 可 以 得 到 所 有 匹配 的 叶子 节点 ， 如 下 面 的 代 


码 所 示 。 
// 根据 输入 编写 一 个 正则 表达 式 ，' i ' 代 表 不 区 分 大 小 写 
Var re = new RegExp (Ext .escapeRe{text), 'i'); 


filter.filterBy (function (n)}{ 
// 只 过 滤 叶 子 节点 ， 避 免 枝 干 被 过 滤 时 ， 底 下 的 叶子 都 无 法 显示 
return ‘'n.isLeaf() || re,test (n.text); 

yo 


口 在 把 不 匹配 的 叶子 节点 隐藏 起 来 后 ， 还 要 把 空 的 非 叶 子 节点 隐藏 起 来 ， 如 下 面 的 代码 所 
示 。 
// 如 果 这 个 节点 不 是 叶子 ， 而 且 下 面 没 有 子 节点 ， 就 应 该 隐藏 起 来 
hiGaenpPkgs = []， 
Lree.rooc .cascade(function(tn) { 
if(l'in,.isLeaf{) && n.ui.ctNode.offsetHeight < 3)1{ 
n.ui.hidet{); 
hiddenPkgs .push (n); 
} 
]) 7; 


完整 示例 在 05.tree/10-02.html 中 ， 也 可 以 直接 查看 docs/resourcs/docs.js 源 文件 。 
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5.11 利用 Treesorter 对 树 进行 排序 


TreeSorter 是 一 个 专门 用 来 对 树 节 点 进行 排序 的 工具 。 例 如 ， 你 获得 了 一 堆 散 乱 的 节点 信 
息 ， 就 可 以 用 TreeSorter 把 它们 排列 整齐 。 

现在 有 这 样 一 棵 散乱 的 树 ， 如 图 5-27 所 示 。 

通过 Treesorter 处 理 之 后 ， 这 些 节 点 就 会 变 得 很 整齐 了 ( 见 图 5-28)。 





图 5-27 排序 之 前 图 5-28 ”排序 之 后 
实现 的 代码 很 简单 ， 仅 使 用 了 一 个 foldersort 参 数 ， 如 下 面 的 代码 所 示 。 


Var sorter = new Ext.tree.TreeSorter(tree, 
folderSort: true, 
3 


folderSort 参 数 可 以 让 所 有 叶子 节点 排 在 非 叶 子 节点 后 面 。 下 面 介绍 在 Treesorter 中 使 用 
的 其 他 几 个 参数 。 

D caseSensitive: 是 否 区 分 大 小 写 ， 默 认为 false， 不 区 分 大 小 写 。 

D air: 排序 方式 (asc/desc) ， 默 认为 asc， 升 序 排列 。 

Q foldersort: 将 叶子 节点 排 到 非 叶 子 节点 后 面 ， 默 认为 false。 

Q leafAttr: 判断 叶子 节点 的 标志 ， 默 认为 leaf。 如 果 node 中 存在 leaf :true 参 数 ， 就 认 
为 这 个 节点 是 叶子 。 

口 property: 根据 节点 的 属性 进行 排序 ， 默 认为 text。 

口 sortType: 这 是 在 排序 前 对 数据 进行 预 处 理 的 函数 ， 默 认 情况 下 是 直接 从 node 中 取得 
text 属 性 n.attributes('text')。 

示例 在 05.tree/11-01.html 中 。 


5.12” 树 形 节 点 视 Ext .tree.TreeNodeUI 
Ext .tree.TreeNodeUI 是 生成 Ext .tree.TreeNode 实 例 时 默认 使 用 的 视图 组 件 。 在 生成 每 


个 Ext .tree,TreeNode 实例 时 ， 它 会 先 查找 this.attributes.uiprovider 和 this. 
defaultUI。 如 果 有 任何 一 个 属性 存在 ， 它 就 会 使 用 这 个 属性 创建 自己 的 视图 。 如 果 这 两 个 属性 
都 不 存在 ， 就 会 使 用 Ext .tree.TreeNodeUI 创 建 视图 。 因 此 ， 在 树 形 结构 中 通常 都 是 使 用 
Ext .tree.TreeNodeUI 作 为 树 形 节 点 的 视图 。 
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可 以 通过 node.ui 的 方式 获得 某 个 Ext .tree.TreeNode 实 例 对 应 的 Ext.tree.Tree- 
NodeUI， 如 下 面 的 代码 所 示 。 


tree,ont{'click’', function{node) I{ 
Var Ui = node.ui; 
ui,addClass{("big"); 
(function() { 

Ui.removeClass ("big"); 
}) .defer (1000); 
# 


上 例 中 监听 Ext .tree.TreePanel 的 click 事 件 。 当 EPE | 
用 户 单 击 一 个 节点 时 ,会 获得 节点 对 应 的 Ext .tree.Tree- | 拉 MY|Leaf No. 1 | 
NoGeUI 实 例 ， 之 后 还 会 调用 实例 的 adadclass () 函数 将 节 | 放下 LeatNo.2 ， 
点 的 文字 转换 为 粗 体 显 示 ， 并 在 1 秒 之 后 调用 remove- : a 
class{) 将 刚刚 设置 的 CSS 样 式 清除 掉 。 单 击 树 形 后 的 效 图 5-29 修改 Ext .tree.TreeNodeUT 
果 如 图 5-29 所 示 。 完 整 代码 如 下 所 示 : 的 文字 样式 

Var tree = new Ext.tree.TreePanel ({ 

el: ‘tree', 


loader: new FExt.tree,TreeLoader () 
D3 


Var root = new Ext.tree.AsyncTreeNode!(t{ 
text : ' 我 是 根 '， 
chilidren: [人 
{text: 'Leaf No. 1',leaf: true, checked: true}, 


~ 


{text: 'Deaf No. 2',leaf: true, checkedG: false} 








] 
垢 六 ， 


tree.setRootNode (root); 
tree. render (),; 


root .expanad (}; 


tree,on{'click', function{node)} { 
var Ui = node,.ui; 
ui.addClass ("big"); 
(function(} { 
ui.removeClass{*big*"); 
}} .defer (i1000); 
}}3» 


除了 addclass () 和 removeClass(}) 函数 之 外 ,Ext .tree.TreeNodeUI 还 提供 了 几 类 功能 函 
数 ， 如 下 所 示 。 
DO getAnchor()、getIconEl{)、getTextE1l() 这 3 个 函数 可 以 分 别 获 得 页 面 上 与 树 形 对 应 
的 <a> 标 签 ， 包 含 图 标的 <img> 标 签 和 包含 文字 的 <span> 标 签 部 分 。 
D hide() 和 show() 函数 可 以 控制 树 形 节 点 是 否 隐 藏 。 
Q isCchecked() 和 toggleCheck() 函 数 可 以 判断 和 修改 树 形 节点 中 Checkbox 的 状态 。 不 过 
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这 两 个 属性 也 只 有 在 属性 节点 中 包含 Checkbox 时 才 可 以 使 用 ， 否 则 ischecked() 会 一 直 
返回 false。 
Ext .tree.TreeNodeUI 中 的 功能 函数 的 应 用 如 下 面 的 代码 所 示 。 


tree.on('click', function{node) ({ 
var ui = node.ui,; 
alert (ui.getAnchor{) + "," + ui.getIconEl() + "," + ui.getTextEl()); 
alert (ui.isChecked!{)); 
ui.toggleCheck(}); 
下 


5.13 ”表格 与 树 形 的 结合 一 一 Ext .ux.tree.ColumnTree 


对 于 某 些 场景 ， 我 们 需要 在 表格 中 实现 分 级 显示 的 功能 ， 它 与 分 组 表格 Ext .grid.Grouping- 
Grid 的 风格 有 些 类 似 , 两 者 都 支持 对 不 同 分 类 数据 执行 展开 和 折 簿 的 操作 。 在 EXT 中 可 以 通过 扩 
展 Ext .tree.TreePanel 和 Ext .tree.TreeNodeUI 的 方式 实现 这 种 表格 与 树 形 结合 的 效果 ， 如 


疼 5-30 所 示 。 
"他 
任务 忻 纪 时 间 册 费 人 
J 迟 EXT 可 序 具 枢 12 沾 月 
沪 梨 一 例 几 MEXT 1 个 月 Lingo 
种 二 如 GRN 个 月 ForgetDavid 
生 十 一 生育 用 工 反 9 十 二 月 kayzhan 
娠 网 办 公 OA 个 翌 
平台 懂 建 1 个 月 ksYZhae 
系 驱 设计 个 月 kayzhsn 
隐 纺 灾 湛 月 ayYzhan 


图 5-30 ”表格 和 树 形 的 结合 


Ext .ux.tree.ColumnTree 其 实 属 于 EXT 的 扩展 件 。 为 了 在 应 用 中 使 用 Ext .ux.tree. 
ColumTree， 我 们 首先 需要 引用 EXT 发 布 包 中 的 column-tree.css 、ColumnNodeUl.css 以 及 
ColummNodeULjs 三 个 文件 。 因 为 Ext .tree.ColumnTree 目 前 只 是 以 扩展 的 形式 放 在 examples 下 
的 tree 目 录 下 ， 它 还 没有 被 包含 到 EXT 核 心 库 中 ， 所 以 我 们 需要 找到 这 两 个 文件 ， 以 手工 的 方式 
导入 到 我 们 自己 的 应 用 中 ， 如 下 面 的 代码 所 示 。 

<script type="text/javascript" src="../ux/ColumnNodeUTI ， js"></script> 


<link rel="stylesheet" type="text/css" href="../ux/css/ColumNodeUI .css" /> 
<link rel="stylesheet" type="text/css" href="../tree/column-tree.css" /> 


在 引用 了 ColumnNodeUIjs 之 后 ， 我 们 就 可 以 使 用 Ext .ux .tree .columnTree 创 建 表 格 形式 
的 树 形 了 ， 如 下 面 的 代码 所 示 。 


Var tree = new Ext.ux.tree,ColumnTreel{t{ 
widths:s 550 ， 
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height: 300, 
rootVisible:false, 
autoScroll:true, 
title: ' 示 例 '， 
renderTo: ‘tree', 


columns: ff 
header : ' 任 务 '， 
width:330, 
dataIndex: 'task' 


header : ' 持 续 时 间 '， 
width:100, 
datalndex: 'duration' 





header:' 人 负责 人 '， 

width:100, 

dataIndex: 'user' 
5 


loader: new Ext .tree.TreeLoader (([ 
GataUrl:'_01._04-12.txt', 
uiproviders:1 
‘col': Ext .ux.tree.ColumnNodeUI 
} 
}) ， 


root: new EXt .ree-ASsyncTreeNode ({ 
<eXt :TaSKS' 
}) 

]) 

上 述 代 码 中 ， 有 以 下 两 点 与 一 般 情况 下 创建 树 形 时 使 用 的 参数 不 一 致 。 

口 columns 参 数 的 值 与 我 们 使 用 Ext .grid.GriaPane1l 时 完全 相同 , 这 里 使 用 columns 参 数 
来 指定 每 一 行 应 该 分 为 几 列 进行 显示 。 我 们 这 里 定义 了 3 列 , 分 别 是 “任务 ” “持续 时 间 ” 
和 “负责 人 ”， 这 3 列 分 别 对 应 着 后 台数 据 中 的 “task”、“duration” 和 “user”。 

口 创建 Ext .tree.TreeLoader 时 ， 在 uiProviders 参 数 中 配置 了 ui:Ext .ux.tree.Column- 
NodeUI， 这 样 我 们 就 可 以 在 生成 树 形 节 点 时 选择 使 用 Ext .ux .tree.ColumnNodeUI 生 成 
节点 视图 。 

前 台 脚 本 已 经 准备 完毕 ， 我 们 还 需要 为 前 台 供 应 匹配 的 后 台数 据 ， 如 下 面 的 代码 所 示 。 


[{ 
task:' 深 入 浅 出 ExtJs'， 
duration:'12 个 月 '， 
Udy 
uiProvider:'col', 
cls: 'master-task', 
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iconCls: ‘task-folder', 

children: [1 
task:' 第 1 间 ”ExT 概述 '， 
duration:'1 个 月 '， 
user:'Lingo', 
uiProvider: 'col', 
leaf:true, 
iconCls:'task’' 


cask: /第 2 章 ”sxT 框 架 基 础 '， 
duration:'2 个 月 '， 
User:'ForgetDavid', 
uiProvider:'col', 

leaf :true, 

iconCls: 'task’ 


casx:! 第 11 章 实用 工具 '， 
duration:'9 个 月 '， 
USer: 'kayzhan', 
UiProvider: ‘col', 
leaf :true, 
iconCls: 'task' 
}] 
,A 
我 们 从 后 台 提 供 的 数据 中 摘录 一 部 分 进行 讨论 。 与 之 前 用 到 的 树 形 数据 相同 ， 后 台 提 供 的 是 
一 个 JSON 数组 ， 我 们 为 数组 中 的 每 个 对 象 都 指定 了 task、 duration 和 user 这 3 个 属性 。 这 3 个 
属性 会 根据 前 台 脚 本 中 设置 的 columns 参 数 对 应 显示 在 “任务 ” “持续 时 间 ”、“ 负 责 人 ”这 3 列 
的 下 面 。 之 前 讨论 过 的 cls、iconCcls、leaf、 childGren 等 属性 的 作用 没有 变 ， 我们 在 这 里 依旧 
使 用 cls 和 iconcls 来 定义 树 形 节点 的 样式 和 图 标 ， 使 用 childaren 为 枝 于 节点 设置 子 节点 ， 使 用 
leaf 定 义 叶 子 节点 。 
需要 注意 的 是 , 我 们 需要 为 每 个 节点 对 象 设置 uiProvider:'col', 这 样 在 生成 树 形 时 Tree- 
Loader 会 从 预先 定义 的 uiProviders 参 数 中 取得 'col' 对 应 的 Ext .ux.tree. ColumnNodeUr,， 
用 它 来 作为 显示 树 形 节 点 的 视图 ， 这 样 我 们 才能 得 到 期 望 中 的 表格 属性 。 
在 新 发 布 的 EXT3.1 中 添加 了 另 一 个 树 形 和 表格 相 结合 的 扩展 组 件 TreeGrid, 详细 介绍 可 以 参 
考 14.5.3 节 。 


5.14 小结 


本 章 讨论 了 EXT 中 树 形 的 原理 和 使 用 方法 ， 包 括 创 建树 形 、 使 用 本 地 数据 和 远程 JSON 为 树 
形 添加 节点 ， 以 及 TreeLoadaer 的 部 分 配置 方式 。 

同时 讲解 了 树 形 事件 ， 包 括 如 何在 树 形 中 使 用 右键 菜单 、 修 改 节点 图 标 、 为 节点 设置 提示 信 
妃 、 为 节点 设置 超 链接 、 直 接 修改 树 形 节点 名 称 等 内 容 。 

此 外 , 集中 讨论 了 树 形 拖 放 , 介绍 了 树 形 多 种 拖 放 方式 , 以 及 树 形 过 滤器 和 使 用 Treesorter 
对 树 形 中 的 节点 进行 排序 ， 并 在 最 后 一 节 中 讲述 了 表格 与 树 形 结合 的 扩展 件 。 
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本 章 内 容 

D 拖 放 简 介 

D 拖 放 的 简单 应 用 
口 拖 放 组 件 体 系 


口 拖 放 的 事件 6 
o 高 级 拖 放 
6.1 拖 放 简介 


拖 放 在 EXT 的 组 件 体 系 中 占有 很 重要 的 地 位 ， 很 多 组 件 内 部 都 封装 了 对 拖 放 功 能 的 实现 。 但 
是 , EXT 官 方 却 几乎 没有 提供 单独 使 用 拖 放 功能 的 示例 。 本 章 将 主要 讨论 拖 放 的 组 件 结构 和 范例 ， 
重点 是 单独 使 用 Ext .da 包 实 现 拖 放 功 能 ， 而 不 是 与 其 他 组 件 相 结合 。 

EXT 中 的 拖 放 有 如 下 功能 。 

口 可 以 拖 放 表格 里 的 行 ， 让 它们 按 指定 的 方式 排列 。 

口 可 以 拖 放 树 里 的 节点 ， 把 节点 从 一 个 枝 干 拖 向 另 一 个 枝 于 。 

D 在 表格 和 树 之 间 也 可 以 进行 拖 放 。 

D 布局 的 split 也 是 一 种 拖 放 ， 可 以 改变 布局 的 大 小 。 

D resize 也 算是 拖 放 ， 改 变 大 小 。 


6.2 拖 放 的 简单 应 用 


对 于 B/S 系 统 而 言 ， 拖 放 一 直 是 一 项 很 少 用 到 的 功能 。 我 们 一 直 认 为 实现 拖 放 功 能 很 复杂 ， 
但 是 在 EXT 中 只 需要 一 行 代 码 就 可 以 实现 最 基本 的 拖 放 功能 ， 如 下 面 的 代码 所 示 。 

new Ext .dda.DDProxy{('block'); 

对 应 的 HTML 部 分 的 代码 如 下 所 示 。 


<div id="block" style="background: red;">&nbsp;</div> 


如 果 不 进行 任何 修饰 , 根本 无 法 看 到 拖 放 的 效果 , 因此 我 们 为 block 加 上 了 红色 的 背景 色 ( 见 
图 6-1) 。 现 在 我 们 可 以 任意 拖 动 这 条 红色 的 aiv， 体 验 EXT 为 我 们 提供 的 拖 放 功能 了 。 
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i 
背景 色 


4 


图 6-1 最 简单 的 拖 放 
该 示例 在 06.dnd/01.html 中 。 
6.3 拖 放 组 件 体系 
我 们 先 看 一 下 拖 放 的 继承 关系 图 ( 见 图 6-2) ， 这 有 助 于 我 们 的 理解 。 


Ext.dd.DragDrop 












Ext.gd.D6 Ext.dd. DDTarget 





Ext.ddDropzone 







ExXt 8dDDPFT5 寺 






EXt.dd.DraggsourEe 





PT 
图 6-2 拖 放 的 继承 关系 图 


简单 来 说 ， 图 6-2 左 边 的 4 个 组 件 都 是 可 以 随意 拖 动 的 。 拖 动 起 来 以 后 ， 直 接 把 它们 放 到 右边 
那些 定义 好 的 区 域 中 。proxy 表 示 可 拖 动 对 象 ，targqet 表 示 拖 动 的 目的 地 。 

我 们 看 了 上 面 的 继承 图 (图 6-2) ， 并 对 它 有 了 简单 的 了 解 。 接 下 来 看 看 下 面 的 示例 ， 其 中 
的 proxy 是 可 以 任意 拖 放 的 ， 如 下 面 的 代码 所 示 。 

Var proxy = new Ext.dd.DragSource('proxy', {group: 'da'}); 

target 告 诉 我 们 可 以 把 上 面 的 proxy 放 到 哪些 地 方 ， 如 下 面 的 代码 所 示 。 

Var target = new Ext .dd.DDTarget ('target', 'dd'); 

注意 到 两 者 之 间 相同 的 4a 了 吗 ? 这 是 分 组 标志 , 用 来 限制 拖 放 的 目的 地 。 只 有 相同 组 名 的 目 
的 地 才能 接收 它 ， 好 比 超市 中 货架 上 的 商品 都 是 放 在 指定 区 域 一 样 。 
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不 过 ， 这 也 只 是 拖 放 而 已 ， 没 有 任何 其 他 效果 。 下 面 我 们 
加 入 一 些小 技巧 ， 可 以 让 拖 放 显得 更 神奇 一 些 ， 如 下 面 的 代码 
所 示 。 


proxy .afterDragDrop = function(target, e, id) { 
var destEl = Ext .get {id); 
var SrcEl = Ext.get (proxy .getEl{})); 
srcEl.insertBefore(destEl); 





}; 


从 上 面 的 代码 中 可 以 看 出 ， 拖 放 后 会 执行 上 面 代码 中 的 对 
应 函数 , 并 通过 ia 获得 carget， 然 后 根据 broxvy .getEl1() 获 得 
proxy， 最 后 把 proxy 添 加 到 target 中 。 上 述 代 码 运行 后 的 页 
面 效果 如 图 6-3 所 示 。 

当然 ， 为 了 让 拖 放 效果 更 清晰 明了 ， 我 们 加 入 了 很 多 CSS 样 式 ， 如 代码 清单 6-1 所 示 。 


代码 清单 6-1 ”实现 更 清晰 拖 放 效果 的 CSS 代 码 


<html> 
<head> 

<meta http-equiv="Content-Type" content="text/hntml; charset=gbk"> 
<title>dad</titie> 
<link rel="stylesheet" type="text/css'" href="../../resources/css/ext-all,.css" /> 
<SCript type="text/javascript" src="../,./adapter/ext/ext-base.js"></script> 
<SCript type="text/javascript"* src="../../ext-all.js"></script> 
<SLY1e type="text/css"> 





图 6-3 ” 拖 放 效果 





HR { 
clear: both; 
visibility: hidden 

} 

,block ({ 
border: lpx red solid; 
margin: 10px; 
min-height: B80px; 

} 

.item { 
border: lpx green soligd; 
background: green; 
float: left; 
margin:10px; 
width: SOpx; 
min-height: SOpx; 
text-align: center; 


</style> 
<Script type="text/javascript"> 
Ext .onReady (function()t{ 


Var proxy = new Ext.dd.DragSource('proxy', {group: 'dd’' }); 


Proxy .afterDragDrop = function(target, e, id) { 
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Var destEl = Ext.get(id); 
Var SICE1 = Ext.get (proxy .gertEl()); 
srcEl.,insertBefore{destEl); 

}s 


Var target = new Ext.dGd.DDTarget ('target', 'Gd'}); 


</Sscript> 

</head> 

<body> 
<script type="text/javascript" SIC="../examples.js"></Sscript> 
<div id="proxy" class="item">item</div> 
长 所 王涛 芝 
<Qiv id="target" class="block"> 

eh 

</div> 

</body> 

</html> 


该 示例 在 06.dnd/02.html 中 。 


6.4 拖 放 的 事件 


拖 放 相关 的 类 都 继承 自 Ext .da.pragDrop， 在 Dragprop 中 定义 了 一 系列 拖 放 操作 过 程 中 需 
要 使 用 的 事件 函数 ， 我 们 可 以 通过 这 些 事件 函数 对 整个 拖 放 过 程 进行 控制 。 

此 处 提 到 的 事件 与 EXT 事 件 模型 并 没有 任何 关系 ， 它 们 是 专门 用 于 处 理 拖 放 的 函数 。 如 
startDrag、 onDrag、 onDragDrop、endDrag、 onDragEnter、 onDragOut、onDragOver、 
onInvalidDrop、onMouseDown 和 onMouseUp， 这 些 函 数 分 别 代 
表 了 不 同 阶段 的 拖 放 过 程 。 在 实际 使 用 中 ， 我 们 需要 重 写 对 应 的 
事件 函数 ， 从 而 监听 和 处 理 拖 放 功能 。 

上 述 的 事件 函数 可 以 分 为 以 下 3 大 类 。 

Q startDrag、onDrag、onDragDrop、enGDrag 是 第 一 类 

拖 放 事件 函数 ， 它 们 构成 了 拖 放 的 主要 过 程 〈 见 图 6-4) 。 

中 StartDrag(int x,int y): 开始 拖 放 事件 ， 参 数 是 包 
含 x、y 的 坐标 值 。 

@ onDrag (Event e): 正在 拖 放 事件 ， 在 拖 放 一 个 对 象 时 
触发 ， 参 数 是 mousemove 鼠 标 移动 事件 。 

W onDragDrop(Event e, String|DragDrop[] id): 
正在 放下 事件 ， 在 一 个 对 象 放 到 另 一 个 Dragprop 对 象 
上 时 和 触 发， 第 一 个 参数 是 mouseup 鼠 标 放 开 事件 ， 第 二 图 6-4 第 一 类 拖 放 事件 函数 
个 参数 表示 drop 的 目标 位 置 。 如 果 是 在 POINT 模式 下 ， 就 会 传 入 目标 元 素 的 ia， 如 果 
是 在 INTERSECT 模 式 下 ， 则 会 传 入 放下 目标 的 拖 放 对 象 数组 。 
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@ endDrag (Event e): 拖 放 结束 事件 ， 在 拖 放 操作 结束 之 后 触发 ， 参 数 是 mouseup 鼠 标 
放 开 事件 。 
DQ onDragEnter 、onDragout 、 onDragOver、 
onInvalidDprag 是 第 二 类 事件 ( 见 图 6-5)， 它 们 细 i 
化 了 用 户 拖 动 对 象 的 过 程 。 ci 
onDragEnter (Event e, String|DragDrop!] x 
id): 进入 arop 区 域 事 件 ， 拖 放 过 程 中 首次 触 碰 ”MA i 
到 drop 区 域 时 触发 。 第 一 个 参数 是 mousemove 妃 De a 
标 移 动 事 件 ， 第 二 个 参数 表示 drop 的 目标 位 置 。 
如 果 是 在 POINT 模 式 下 ， 就 会 传 入 目标 元 素 的 : A 
id; 如 果 是 在 INTERSECT 模 式 下 ， 则 会 传 入 放 : onDragover 
下 目标 的 拖 放 对 象 数 组 。 : 
onDragout (Event e， StringlDragDrop [ j 
id) : 离开 arop 区 域 事 件 ， 拖 放 过 程 中 从 arop 区 
域 离开 时 触发 。 第 一 个 参数 是 mousemove 鼠 标 移 图 6-5 第 一 类 拖 放 事件 函数 
动 事 件 ， 第 二 个 参数 表示 drop 的 目标 位 置 。 如 果 是 在 POINT 模 式 下 ， 就 会 传 入 目标 元 
素 的 ia; 如 果 是 在 INTERSECT 模 式 下 ， 则 会 传 入 放下 目标 的 拖 放 对 象 数组 。 
onDragOver (Event e，StringlDragDrop[] id): 在 arop 区 域 中 拖 放 移动 事件 ， 当 
在 arop 区 域 拖 放 移动 时 触发 。 第 一 个 参数 是 mousemove 鼠 标 移 动 事 件 ， 第 二 个 参数 表 
示 drop 的 目标 位 置 。 如 果 是 在 POINT 模式 下 ， 就 会 传 入 目标 元 素 的 ia; 如 果 是 在 
INTERSECT 模 式 下 ， 则 会 传 入 放下 目标 的 拖 放 对 象 数组 。 
@ onInvalidDrop(Event e): 不 能 drop 事件 ， 不 在 arop 区 域 移动 时 触发 ， 参 数 是 
mousemove 鼠 标 移动 事件 。 
DonMouseDpown 和 onMouseUp 是 第 三 类 拖 放 事件 函数 ， 它 们 用 于 对 原始 鼠标 事件 进行 提示 ， 
而 且 已 经 融合 在 前 两 类 拖 放 事件 函数 中 了 ， 它 们 的 关系 如 图 6-6 所 示 。 


| 
) HU 





. 
PT 





oniMouseDown onMouseUp 


onMouseMove 





图 6-6 ”第 三 类 拖 放 事件 函数 


Mm OnMOUSeDown (Event e): 鼠标 按 下 事件 ， 参数 是 mousedown 鼠 标 按 下 事件 。 
@ onMouseUp (Event e): 鼠标 放 开 事件 ， 参 数 是 mouseup 鼠 标 放 开 事件 。 
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6.5 ”高 级 拖 放 


在 EXT 中 ， 虽 然 拖 放 被 单独 放 在 一 个 命名 空间 中 ， 但 是 examples 目 录 下 却 没有 关于 拖 放 的 示 
例 。 这 让 我 们 在 享受 表格 和 树 的 内 置 拖 放 功能 的 同时 ， 又 觉得 很 无 奈 。 如 何 单独 使 用 Ext .dd 呢 ? 
幸运 的 是 ，YUI 为 我 们 提供 了 大 量 拖 放 的 示例 ， 我 们 下 面 将 逐一 对 这 些 示例 进行 讲解 。 


6.5.1 基础 
我 们 先 看 看 YUI 中 包含 的 基础 (Basic) 示例 ， 这 个 示例 是 最 基本 的 ， 代 码 如 下 所 示 。 


ddl = new Ext,dqd.DDfdd-demo-1") ; 
dd2 = new Ext.dd.DpD{"dd-demo-2"); 
d93 = new Ext.dd.DpD{"dd-demo-3"); 


这 部 分 是 JavaScript 代 码 ， 创 建 3 个 拖 动 对 象 ， 参 数 对 应 HTML 中 的 3 个 ia， 让 这 3 个 对 象 变 成 
可 拖 动 的 元 素 ， 如 下 面 的 代码 所 示 。 


<div id="dd-demo-1" class="dd-demo"></div> 
<div id="dd-demo-2" class="dd-demo"></div> 
<div id="*dd-demo-3" class="dd-demo"></dGivy> 


class 部 分 不 用 细 讲 ， 这 些 CSS 样 式 只 是 为 了 让 外 观 更 漂亮 ， 唯 一 需要 注意 的 是 aiv 中 的 ia。 
这 3 个 aiv 现 在 已 经 被 EXT 改 造成 可 拖 放 的 对 象 了 ， 可 以 任意 地 拖 放 。 功 能 很 简单 ， 它 的 效果 如 图 
6-7 所 示 。 





Drag and Drop Basic 


图 6-7 ”基础 (Basic) 示例 效果 图 
示例 在 06.dnd/04-01.html 中 。 


6.5.2 ”控制 柄 


控制 柄 (Handle》 就 好 比 菜刀 的 刀 柄 ， 提 着 刀 柄 我 们 才能 方便 地 使 用 菜刀 。 这 里 演示 的 是 为 
拖 放 对 象 指定 一 个 区 域 ， 用 户 只 有 抓 住 这 个 区 域 才能 拖 动 整个 对 象 见 图 6-8) 。 








中 EXT 从 YUI 发 展 而 来 . 
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Drag and Drop Handles 








图 6-8 ”控制 顶 (Handle〉 示 例 效果 图 


还 是 刚才 的 3 个 aiv， 第 一 个 aiv 上 放 两 个 小 控制 柄 ， 第 二 个 aiv 上 放 一 个 控制 柄 ， 第 三 个 控 
制 柄 放 到 aiv 外 边 ， 控 制 柄 不 会 随 着 aiv 一 起 拖 动 。 这 样 ， 只 有 鼠标 放 到 控制 柄 的 位 置 上 才能 拖 
动 对 应 的 aiv， 抓 住 其 他 部 分 是 不 起 作用 的 。 

先 看 一 下 div 的 结构 ， 首 先 在 原来 的 div 标 签 基 础 上 添加 控制 柄 对 应 的 aiv 内 容 ， 如 下 面 的 代 
码 所 示 。 

<div id="dd-demo-1" class="dd-demo"> 

<div id="dd-handle-la*" class="dd-multi-handle-l">Hl</div> 
<div id="dd-handle-1b" class="dd-multi-handle-2">H2</div> 

Sp id="dd-demo-2" class="dd-demo"> 

<div id="dd-handle-2" class="dG-handle">H</Qiv> 

</Gdiv> 

i id="dd-handle-3" class-"dd-outer-handle">Outer</div> 

<div id="dd-demo-3" class="dd-demo"></div> 

在 上 述 代码 中 ， 前 两 个 控制 柄 放 在 对 应 aiv 的 内 部 ， 而 第 三 个 控制 柄 放 在 对 应 aiv 的 外 部 ， 
现在 我 们 为 这 些 控制 柄 添加 控制 功能 ， 如 下 面 的 代码 所 示 。 

ddl = new Ext.dd.DD("dd-demo-1"); 

ddi.setHandleEl1ld("dd-handle-1a"); 
ddl.setHandleElId("dd-handle-1b"); 

dd2 = new Ext .dd.DD("dd-demo-2"); 

ddq2 .setHandleElId("*dd-handle-2"}); 

dd3 = new Ext .dd.DD("dd-demo-3"); 

dd3.setOuterHandleEl1Iid("dd-handle-3"); 

用 法 很 简单 ， 只 要 调用 Ext .dd.DD 的 setHandleE1lId() 函数 并 绑 定 对 应 控制 柄 的 id 即 可 。 
而 setouterHandleE1lId() 函 数 是 专门 用 来 指定 外 部 控制 柄 的 。 通 过 这 些 配 置 , 我们 就 限制 用 户 
只 能 通过 控制 柄 对 div 进 行 拖 放 了 。 不 过 ， 外 部 的 控制 柄 不 会 跟着 被 拖 动 的 saiv 一 起 移动 。 

示例 在 06.dnd/04-02.htmjl 中 。 


6.5.3 总 在 最 上 面 
为 了 便于 拖 放 ， 我 们 希望 当前 正在 拖 放 的 aiv 总 显示 在 最 上 面 (On Top) ， 不 会 被 其 他 元 素 
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遮挡 住 ， 这 样 才能 看 清楚 到 底 把 Giv 拖 放 到 了 什么 位 置 。 
为 了 实现 这 个 效果 ， 我 们 就 要 重 写 监听 拖 放 事件 的 函数 ， 见 代码 清单 6-2。 


代码 清单 6-2 ”为 onTop 重 写 监 听 拖 放 事 件 的 函数 


Ext .ux.,DDOnTop = function{id, sGroup, config) { 
Ext .UX.DDOnTop .superclass.constructor.apply (this, arguments)}); 
Ls 


Ext .extend{Ext .ux.DDONTop, Ext.dd.DD, { 
origz: 0, 


startDrag: function(x, y) 1 

Var style = this.getEl().style; 

this.origz = style.zIindex:; 

style.zIndex = 999; 
Sp function(le) { 

this.getEl() .style.zIndex = this.orig2; 

} 

Fk; 

我 们 在 这 里 定义 了 一 个 新 对 象 Ext .ux.DDonTop， 它 继承 自 Ext .dad.pD。 我 们 为 
Ext .ux.DDOnTop 重 写 了 函数 startDrag() 和 endDrag() 。 这 样 ， 在 开始 拖 放 对 象 时 会 执行 
startDrag (), 把 正在 拖 放 的 元 素 对 应 el 的 zIndex 树 形 设置 成 999。 这 个 值 已 经 很 大 了 ， 基本 可 
以 保证 当前 元 素 一 直 显 示 在 所 有 元 素 的 最 上 面 , 待 停止 拖 放 时 再 执行 endprag ()， 把 对 应 元 素 el 
的 zIndex 树 形 恢复 成 原来 的 数据 。 

下 面 不 需要 再 进行 修改 了 ， 创 建 3 个 Ext .ux.DDOnTop 对 象 即 可 。 这 样 就 实现 了 总 在 最 上 面 


的 效果 ， 如 下 面 的 代码 所 示 。 


= New Ext .ux.DDOonTop ("dd-aemo-1。) ; 
dd2 = new Ext.uUx.DDOnTop(t"add-demo-2") ， 
= new Ext .ux,.DDOnTop("dd-demo-3"),; 


运行 结果 如 图 6-9 所 示 。 
该 示例 在 06.dnd/04-03.html 中 。 


| Drag and Drop On Top 





图 6-9 总 在 最 上 面 (On Top) 示例 效果 图 


Download at Pin5i.Com 


http://52pdf.taobao.com 


6.5 ”高 级 拖 放 177 


6.5.4 代理 


所 谓 代 理 (Proxy) ， 就 是 拖 放 时 原 aiv 不 动 ， 跟 随 鼠 标 移动 的 是 一 个 名 为 Proxy 的 拖 放 。 
如 果 需 要 拖 动 的 对 象 十 分 复杂 ， 每 次 都 让 它 跟随 鼠标 移动 ， 那 么 很 可 能 会 使 浏览 器 负荷 过 大 ， 
甚至 出 现 页 面 停顿 的 现象 。 这 时 就 需要 使 用 代理 来 避免 重复 泻 染 复杂 对 象 ， 代 理 的 效果 如 图 
6-10 所 示 。 


Drag and Drop Prory 


图 6-10 ”代理 (Proxy) 示例 效果 图 


为 了 使 用 代理 ， 最 简单 的 办 法 就 是 把 原来 的 Ext .aq.DD 改 成 Ext .da.Dppproxy， 如 下 面 的 代 
码 所 示 。 


ddl = new Ext .dd.DDProxy {"dd-demo-1*"}); 
dd2 = new Ext .dd.DDProxy ("dd-demo-2"); 


这 样 就 会 出 现 一 个 只 有 外 框 的 空白 Proxy。 如 果 我 们 希望 自 定义 Proxy 的 形式 ， 也 可 以 制作 
图 6-10 中 演示 的 黑色 Proxy， 如 下 面 的 代码 所 示 。 


Gd3 = new Ext.dd.DDProxy ("dd-demo-3", "default", 1 
dragFElId: "dd-demo-3-proxy", 
resizeFframe: false 

直下 有 


为 了 实现 自 定义 Proxy， 我 们 在 创建 DDProxy 时 需要 设置 3 个 参数 。 第 一 个 参数 是 对 应 的 Gdiv 
的 id; 第 二 个 参数 是 拖 放 的 组 ， 只 有 同 组 的 Drag 才 能 放 到 同 组 的 Drop 上 【该 参数 我 们 现在 还 不 
会 用 到 ， 暂 不 考虑 ) ; 第 三 个 参数 是 附加 参数 。 

dragE1lId 的 值 是 我 们 自 定 义 的 proxy， 而 resizeFrame:false 告 诉 EXT 不 用 使 proxy 的 大 
小 与 原 div 一 样 。 

看 下 面 的 代码 , 第 三 个 proxy 与 dd-demo-3 对 应 , 我 们 还 需要 在 HTML 里 加 上 这 个 代理 对 应 的 
Qiv， 如 下 面 的 代码 所 示 。 


<div id="dd-demo-3-proxy">proxy-3</div> 


该 示例 在 06.dnd/04-04.html 中 。 
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6.5.5 分 组 


分 组 (Group) 这 个 示例 比较 复杂 , 显示 效果 如 图 6-11 所 示 , 分 组 功能 的 实现 是 内 置 在 Ext .da 
中 的 ， 使 用 起 来 很 方便 。 


Drag and Drop Groups 
] 


图 6-11 分 组 (Group) 示例 效果 图 


简单 说 明 一 下 ， 图 6-11 下 方 有 6 个 正方 形 ， 上 方 也 有 6 个 正方 形 区 域 ， 我 们 要 做 的 就 是 把 下 方 
的 正方 形 拖 到 上 面 的 正方 形 区 域 中 。 我 们 使 用 拖 放 分 组 限制 了 拖 放 的 方式 ， 下 面 的 6 个 正方 形 的 
拖 放 形式 是 有 区 别 的 :1 号 和 2 号 只 能 放 到 .上边 的 1 号 和 2 号 上 ; 3 号 和 4 号 可 以 放 到 上 面 的 3?、4、5、 
6 号 上 ; 5 号 和 6 号 可 以 放 到 上 面 任何 一 个 框 上 。 这 种 方式 就 叫做 分 组 ， 只 有 同一 组 中 的 元 素 才 能 
互相 拖 放 。 

在 Ext.daa 中 ， 可 以 拖 放 的 元 素 称 为 DpProxy， 可 以 让 这 些 ppproxy 放 下 的 区 域 叫 做 
DDTarget。 我 们 可 以 把 DragProxy 拖 动 到 同 组 的 DDTarget 中 ， 这 样 就 限制 了 拖 放 的 范围 。 

HTML 中 的 内 容 如 代码 清单 6-3 所 示 。 


代码 清单 6-3 ”分 组 的 页 面 布局 


<div id="workarea"> 
<div class="slot" id="t1l* >i</div> 
<div class="slot" id="t2" >2</div> 
<div class="slot*" id="bl" >3</div> 
<Giv class="slot" id="b2" >4</div> 
<div class="slot" id="b3" >5</div> 
<div class="slot" id="b4*" >6</div> 
<div class="player*" id="pti*" >l</div> 
<div class="player" id="pt2" >2</div> 
<div class="player" id="pbl" >3</div> 
<Giv class="player" id="*pb2" >4</dAiv> 
<div class="player" id="pbothi" >»>5</div> 
<div class="player" id="pboth2" >6</div> 
</div> 
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<select id="ddmode" > 
<option value="0" selected>Point</option> 
<option value="1l">Intersect</option> 
</select> > 


上 面 的 HTML 代 码 包括 了 图 6-11 上 方 的 6 个 正方 形 和 下 方 的 6 个 正方 形 区 域 ， 另 外 还 有 一 个 下 
拉 框 用 来 选择 拖 放 碰撞 的 检测 模式 。 现 在 来 看 看 如 何在 JavaScript 中 将 这 些 HTML 元 素 转换 成 可 拖 


放 的 组 件 。 
首先 为 上 方 的 6 个 正方 形 创建 DDTarget， 如 下 面 的 代码 所 示 。 
var slots = []; 
// 村 位 
slots[0] = new Ext .dd.DDTarget ("tl", "topslots"),; 
Slots[1] = new Ext .dd.DDTarget ("t2", "topslots"); 
slots[2] = new Ext.dd.DDTarget ("bj", "bottomslots"),; 
slots[3] = new EX .dd.DDTarget ("hb2", "bottomslots"),; 
slots[4] = new Ext.dd.DDTarget ("bb3", "bottomslots"); 
slots[5] = new Ext .dd.DDTarget ("b4", "pbottomslots"); 


第 一 个 参数 是 PDTarget 对 应 的 ia， 第 二 个 参数 是 组 名 。 这 里 把 6 个 DpTarget 分 成 了 两 组 
copslots 和 buttomslots， 以 后 的 操作 就 都 是 基于 这 两 个 组 的 。 

接 下 来 就 是 操作 Ext .dd.DDProxy 了。 为 了 实现 突出 显示 CSS 样 式 ， 继 承 Ext .dda.DDProxy 
实现 了 新 的 类 型 Ext .ux .DDPlayer， 这 些 细节 并 不 会 影响 拖 放 的 分 组 操作 。 创 建 分 组 拖 放 对 象 
的 过 程 如 代码 清单 6-4 所 示 。 


代码 清单 6-4 ”创建 分 组 拖 放 对 象 


var players = []; 





// 拖 放 对 象 

Players[0] = new Ext.uUXx.-DDPLayer("pt1l1"， "topslots"); 
players[1) = new Ext .ux.DDPlayer("pt2", "topslots"); 
players[2]】 = new Ext .ux.DDPlayer{("pbl", "bottomslots"); 
players[3)] = new Ext .ux.DDPlayer("pb2", "botrtomslots"); 
players[4] = new Ext .ux.DDPlayer{"pbothl", "topslots"); 


players[4] .addToGroup{"bottomslots"); 
players[5] = new Ext .ux.DDPlayer{"pboth2", "topslots"); 
players[5] .adAdToGroup{("bottomslots"}; 


1 号 和 2 号 DDPlayer 对 应 的 分 组 是 topslots; 3 号 和 4 号 DDPlayer 对 应 的 分 组 是 
bottomslots; 5 号 和 6 号 DDPlayer 对 应 的 分 组 是 copslots， 然 后 调用 adadToGroup () 函数 将 这 
两 个 DDPlayer 添 加 到 bottomslots 组 中 。 这 样 一 来 ，$ 号 和 6 号 DDPlayez 与 两 个 组 都 绑 定 了 ， 它 
们 可 以 拖 放 到 这 两 个 组 中 所 有 的 ppTarget 上 了 。 

最 后 的 部 分 是 为 Ext .dd .DragDropMgr 设 置 碰撞 检测 模式 : POINT 和 INTERSECT。POINT 
对 应 的 值 是 9，INTERSECT 对 应 的 值 是 1， 如 下 面 的 代码 所 示 。 


Ext .dd .DragDropMgr .mode = Ext .get('ddmode'}) .dom.selectedIindex; 
Ext .get ('ddmode') .on('change', function() { 


Ext .dd .DragDropMgr .mode = Ext.get('ddmode') .dom.selectedIndex; 
}}3 
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这 两 者 的 区 别 是 ， 在 POINT 模式 下 ， 当 抑 放 的 鼠标 进入 DDTarget 的 范围 时 才能 放下 ; 在 
INTERSECT 模 式 下 ， 当 拖 放 的 ppProxy 边 缘 与 DDTarget 有 重 八 时 才 可 以 放下 。 

Ext .ux.DDPlayez 的 内 部 很 复杂 ， 它 继承 自 Ext .dd.DDProxy， 在 内 部 通过 Ext .dd.Drag- 
DropMgr 来 操作 相互 之 间 有 关联 的 元 素 。 我 们 使 用 Ext .ux .DDPlayer 实 现 抑 放 功 能 的 代码 如 下 所 
修 : 


Ext .ux.DDPlayer = function{id, sGroup, config) { 
EXxt .ux.DDPlayer.superclass.constructor.apply (this, arguments); 
this.initPlayer(id, sGroup, config)}; 

}; 


Ext .extend (Ext .ux.DDPlayer, Ext.dd.DDProxy, { 

TYPE: “DDPlayer", 

initPlayer: functionlid, sGroup, config} { 
FE 让 区 泛 

return; 

} 
var el = this.getDragEl1{); 
Var elem = Ext .get (el); 
elem.setStyle{("borderColor", "transparent"}; 
elem.setStyle("opacity", 0.76); 
this.isTarget = false; 


this.originalSstyles = [}; 


this.type 
this.slot 


EXt .UX .DDPlayer ,TYPE:; 
null; 


[lL | 


this.startPos = Ext.get (this.getEl(}) .getxY{); 
j} 


startDrag: Eunction(x，Y) 1{ 


var dragEl = this.getDragEl 1{); 
Var clickE} = this.getEl{); 


dragEl .innerHTML = clLickEl .innerHTMI,; 
dragEl} .className = clickEl .className; 


Ext .get (GragE1) .setSstyle("color", Ext.get{clickEl}) .getStyle{"color")); 

Ext .get (dragEl) .setStyle{("backgroundColor", Ext.get (clickEl) .getStyle 
{"backgroundColor")}); 

Ext .get (clickEl) .setStyle{!"opacity", 0.1); 


Var targets = Ext .dd.DragDropMgr .getRelatedlthis, true); 
for {var i=0; i<targets.length; i++) f{ 


var targetEl] = this.getTargetDomRef (targets(i]); 


if (!this.originalstyles[targetEl.id)} 1 
this.originalSstyles[targetEl.id] = targetEl.className; 
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} 
targetEl .className = "target"; 
二 


getTargetDomRef: function(oDD) i 
if (oDD.player) { 
return oDD.,player .getFl (); 
} else { 
return oDD.getEl (); 


} 
} 


endDrag: function{e) { 
Ext .get (this.getE1L()) .setStyle{"opacity", 1); 


this.resetTargets(); 
hs 


resetTargets: function() { 
var targets = Ext.dd.DragDropMgr .getRelated(this, true):; 
for (var i=0; i<targets.length; i++) { 
Var targetEl = this.getTargetDomRef (targets[i})); 
var olqStyle = this.originalStyles [targerEl.idj; 
if (oldSstyle) { 
targetEl.className = oldSstyle; 





}, 


onDragDrop: function(le, id) { 


Var oDD:; 
if ("string" == typeof id) 1{ 

oDD = Ext .dd.DragDropMgr .getDDById(id); 
} else { 


oDD = Ext.dd.DragDropMgr .getBestMatcht{id); 
} 


var el = this.getEl(); 


if (opD.player) { 
if (this.slot) 1{ 
it { Ext.dd.DragDropMgr.isLegalTarget (opD.pliayer, this.slot) ) { 
Ext .dd.DragDropMgr .moveToE1 (opD.player.getEl(), el}; 
this.slot .player = obDD.player; 
oDD,.player.siot = this.slot,; 
} else ( 
Ext .dd.DragDropMgr. setXY (oDD .player.getEl(), oDD.player.startPos); 
this.slot .player = null; 
oDD.player.slot = null 
} 
} else { 
oDD.player.slot = null: 
Ext .dd .DragDropMgr .moveToEl {oDD.player .getEl(), el):; 
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) else | 
if (this.slot) { 
this.slot .pliayer = null; 
} 
} 


Ext .dd.DragDropMgr .moveToEl (el, oDD.getEl()}; 
this.resetTargets (); 


this.slot = oDD; 
this.slot.player = this; 
天 


swap: function(tel1，el2) { 


var posl = Ext.get (ell) .getXY{(}); 
var pos2 = Ext.get(el2) .getXY(); 


Ext .get {ell} .setXY (pos2}); 
Ext .get (el2) .setXY (posl); 
和 


onDragOver: functionte，id) { 
}, 


onDrag: function(le, id) { 
} 


Hs 
该 示例 在 06.dnd/04-05.html 中 。 


6.5.6 ”网 格 


网 格 〈Grid) 为 拖 放 对 象 设置 步 长 ， 每 次 拖 放 时 不 再 平滑 移动 ， 而 是 沿 网 格 非 线性 移动 ( 见 
图 6-12)。 如 果 可 以 根据 这 个 功能 自 定义 页 面 模板 布局 ， 应 该 是 非常 不 错 的 。 


Drag and Drop Grid 





图 6-12 网 格 (Grid) 示例 效果 图 
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这 里 是 HTML 中 的 定义 ， 如 下 面 的 代码 所 示 。 


<div idG="dragDivl" class="testSquare">Ext .dd,DD</div> 
<div id="dragDiv2" class="testSquare">Ext .dd.DD</div> 
<div id="dragDiv3" class="testSquare">Ext .dd.DD</div> 


页 面 上 显示 的 网 格 和 拖 放 的 图 片 都 是 通过 CSS 定 义 的 , 背景 中 使 用 的 定义 如 下 面 的 代码 所 示 。 
body { background: url("img/grid.png") } 


有 了 这 些 准 备 ， 我 们 再 利用 Ext .da 来 制作 拖 放 对 象 。 此 外 ， 还 要 对 拖 放 对 象 的 移动 距离 进 


行 控制 ， 


dal 


ddl. 


ddl 
dda2 
dd2 
dd2 
da3 


dd3. 


dd3 


如 下 面 的 代码 所 示 。 


= new Ext .dd.DD!("dragDivil"* 
setxXConstraint (1000, 1000, 
.SetYConstraint {i1000, 1000, 
= new Ext .dd.DD{("dragDiv2" 
‘SetXConstraint (1000, 1000, 
.SetYConstraint (1000, 1000, 
= new Ext .dd.DD("dragDiv3" 
setXConstraint (1000, 1000, 
.SetYConstraint (i000, 1000, 


}; 
2 有 ] 汉 
25)3 
Fi 

a5 
25); 


~ 


机 有 
5 


生成 Ext .dda.DD 对 象 的 形式 与 之 前 完全 一 样 , 不 同 的 是 为 这 些 拖 放 对 象 设置 移动 距离 。 注意 
函数 setxconstraint () 和 setYconstraint ()， 这 两 个 函数 各 有 3 个 参数 。setxConstraint () 
的 3 个 参数 分 别 是 左 侧 可 以 达到 的 最 远 距离 (以 像素 为 单位 ), 右 侧 可 以 达到 的 最 远 距离 和 每 次 移 
动 的 距离 ;setYConstraint () 的 3 个 参数 分 别 是 上 面 可 以 达到 的 最 远 距 离 ， 下 面 可 以 达到 的 最 
远 距 离 和 每 次 移动 的 距离 。 这 样 ， 左 、 右 和 上 、 下 可 移动 的 范围 都 是 从 -1000 到 1000， 每 次 移动 


25 像 素 ， 正 好 与 背景 方 格 的 大 小 一 样 。 


该 示例 在 06.dnd/04-06.html 中 。 


6.5.7 


拖 动 圆 形 


当然 ,在 HTML 里 是 不 能 画 圆 〈Circle) 的 ， 我 们 使 用 的 
是 一 个 圆 形 图 片 。 为 了 让 效果 更 逼真 ， 在 拖 放 时 ， 检 测 碰 撞 Drag and Drop Circle 


的 算法 还 是 把 这 个 拖 放 体 当 作 圆 形 来 看 待 。 接 下 来 ， 我 们 可 
以 讨论 一 

图 6-13 中 的 圆 形 就 是 可 拖 放 对 象 ， 正 方形 是 与 其 对 应 的 
DDTarget， 只 有 把 圆 形 拖 到 正方 形 上 才能 放下 ， 和 否则 又 会 弹 


回 原 地 。 


下 如 何 自 定义 碰撞 边界 。 





为 了 实现 将 圆 形 放 到 方形 区 域 上 的 效果 ， 我 们 需要 判断 ee 
圆 形 与 正方 形 区 域 盈 放 在 一 起 的 时 机 ， 需 要 知道 什么 时 候 圆 ed 
形 与 方形 区 域 出 现 了 重 又 ， 然 后 才能 执行 将 贺 形 放 入 方形 区 。 里 613 国 形 Circle》 示例 效果 图 
域 的 操作 ， 具 体 步骤 如 下 所 示 。 
(1) 获得 拖 放 对 象 的 初始 位 置 ， 如 下 面 的 代码 所 示 。 


Var clickRadius = 46; 
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var el = Ext .get ("dd-demo-1"); 
startPos = el.getXY(); 


clickRadius 是 圆 形 的 半径 ， 用 来 计算 碰撞 边界 。 
(2) 生成 拖 放 对 象 ， 如 下 面 的 代码 所 示 。 
Gd = new Ext .da.DP(el):; 


(3) 为 拖 放 对 象 设 置 校 验 函数 〈( 见 代码 清单 6-$) 。 
代码 清单 6-5 ” 拖 放 校 验 函数 


dd.clickValidator = functionle)} { 


Var el = this.getEl(); 

vat region = Ext .get {el) .getRegion{}); 

var r = clickRadius; 

var xl1 = e.getPageX(), yl1 = e.getPageY!{); 

Var x2 = Math.roundl (region.right + region.left) / 2); 
Var y2 = Math.roundl{ (region.top + region.bottom) / 2); 


e.preventDefault(); 


return tt (XX) RL=Xx2) + {l=-y2]* (yey2)} = Tr: 3 
}3 


首先 获得 DragTarget 中 的 region， 其 中 保存 了 上 、 下 、 左 、 右 4 个 边界 。 用 它 可 以 计算 出 
DragTarget 中 心 点 的 位 置 (x2,y2) ， 然 后 再 获得 (x1,y1)， 这 是 拖 放 过 程 中 鼠标 的 x 坐标 和 y 
坐标 。 

然后 计算 一 下 (xl,y1) 和 (x2,y2) 这 两 点 之 间 的 距离 ， 也 就 是 鼠标 与 DragTarget 之 间 的 
距离 。 如 果 这 个 距离 小 于 半径 ， 说 明 圆 形 可 以 放 到 DragTarget 上 ， 否 则 就 是 无 效 的 。 在 这 两 种 
情况 下 会 分 别 执行 函数 onDragDrop ( ) 和 onInvaliaDrop()。 

onpragprop () 会 把 拖 放 对 和 象 的 位 置 设置 成 pragTarget 的 位 置 ， 看 起 来 就 像 圆 形 放 到 了 
DragTarget 中 间 一 样 ， 如 下 面 的 代码 所 示 。 


dd.onDragDrop = function(e, id) 1{ 
Ext .get (this.getEl()) .setXY (Ext ,get (id) .getxY()}):; 
} 


onValidDrop() 会 让 拖 放 对 象 返回 原 位 ，moveTo () 函数 的 前 两 个 坐标 是 x 和 y， 第 三 个 参数 
true 表 示 开 启动 画 效果 ， 如 下 面 的 代码 所 示 。 


Gd.onIinvalidDrop = functionle) 1 
Ext .get (this.id) .moveTolstartPos{0], startPos[1], true}): 
} 


(4) 设置 DDrarget， 如 下 面 的 代码 所 示 。 
dd2 = new Ext.dd.DDTarget ("dd-demo-2"}).，; 


所 有 步骤 都 已 经 完成 了 ， 现 在 可 以 党 试 拖 放 圆 形 了 。 
该 示例 在 06.dnd/04-07.html 中 。 
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6.5.8 拖 动 范围 


在 页 面 上 画 一 个 矩形 ， 让 拖 放 对 和 象 只 能 在 这 个 矩形 里 任意 拖 动 ， 这 就 是 限制 抑 放 的 范围 
(Region) ， 如 图 6-14 所 示 。 


Drag and Drop Region 





图 6-14” 拖 动 范 围 (Region) 示例 效果 图 


如 图 6-14 所 示 ， 蓝 色 和 矩形 (1 号 ) 只 能 在 蓝 色 区 域 里 移动 ， 绿 色 和 矩形 (2 号 ) 只 能 在 绿色 方 框 
里 移动 ， 棕 色 和 矩形 (3 号 ) 只 能 在 棕色 区 域 里 移动 。 
看 一 下 示例 的 HTML 内 容 , 把 3 个 可 拖 放 的 aiv 放 到 3 个 不 同 大 小 的 siv 里 ， 如 代码 清单 6-6 所 泵 。 


代码 清单 6-6 ”示例 的 HTML 内容 


<div idG="dd-demo-canvasl"> 
<div id="dd-demo-canvas2"> 
<div id="dd-demo-canvas3"> 
<div id="dd-demo-1" class="dd-demo"><div>l</div></div> 
<div id="dd-demo-2" class="dd~demo"><div>2</div></div> 
<div id="dd-demo-3" class="dd-demo"><div>3</div></div> 
</div> 
</div> 
</AGiv> 


dd-demo-1、dd-demo-2、dd-demo-3 是 可 拖 放 的 对 象 ，dd-demo-canvasl、dd-demo- 
canvas2 、dd-demo-canvas3 对 应 的 是 拖 放 范围 。 为 了 实现 该 效果 ， 还 专门 创建 了 
Ext .ux .DDRegion 对 象 ， 如 下 面 的 代 人 码 所 示 。 


ddl = new Ex .ux.DDRegion('dd-demo-1’', '', { cont; 'dd-demo-canvas3' }) ， 
Gd2 = new Ext .ux.DDRegion('dd-demo-2', '', { cont: 'dd-demo-canvas2' }); 
G93 = new Ext ,ux.DDRegion('dd-demo-3', '', { cont: 'dd-demo-canvasl' }),， 


DDRegion 继 承 自 Ext .dd .DD， 所 以 创建 过 程 中 的 3 个 参数 分 别 是 ， 拖 放 Giv 的 1G、 拖 放 组 和 
附加 参数 。 这 里 的 附加 参数 中 包含 的 cont 对 应 了 可 拖 放 区 域 的 ia， 这 个 参数 是 设置 在 DDRegion 
中 的 。 让 我 们 回头 看 看 在 DDRegion 中 是 如 何 做 的 吧 ， 如 下 面 的 代码 所 示 。 
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Ext .ux.DDRegion = function(id, sGroup, config) { 

this.cont = config.cont; 

Ext .ux .DDRegion.superclass.constructor.apply (this, arguments}; 
}; 


首先 在 构造 函数 里 把 config .Cont 赋 给 this.cont， 然 后 调用 DDRegion 父 类 的 构造 函数 进 
行 初始 化 ， 如 代码 清单 6-7 所 示 。 


代码 清单 6-7” 拖 放 范 围 


Ext .extend (Ext .ux.DDRegion, Ext.dd.DD, 1{ 

conts: :nulls 

init: function{) { 
Ext .ux.DDRegion.superclass.init.apply lthis, arguments}); 
this.initConstraints(); 

上 

initConstraints: function() { 
var region = Ext.get (this.cont) .getRegion!(),; 


var el = this.getEl(); 

Var XY = Ext.get {el) .getxY!(); 

var width = parseint (Ext .get (el) .getstyle('width'), 10}; 
var height = parseInt (Ext .get (el) .getSstylel('height'), 10):; 
Var left = xy[0] - region.left; 

var right = region.right - xy[0] - width; 

Var top = xy[1] - region.top; 

Var bottom = region.bottom - xy[1] - height; 


this.setxConstraint (left, right); 
this.setYConstraint (top, bottom); 
} 
}}; 


剩 下 的 这 些 都 是 在 initconstraints () 函数 里 进行 配置 的 。this .cont 计 算出 它 所 在 的 
region, 获得 的 是 可 拖 放 区 域 的 上 、 下、 左 、 右 4 个 边界 ， 然后 把 这 4 个 值 通 过 setxconstraint () 
和 setYConstraint () 两 个 函数 设置 给 Ext .dda.DD， 这 样 就 限定 了 4 个 方向 上 的 可 移动 范围 。 说 
到 底 ， 其 实 还 是 利用 了 setxconstaint () 和 setYconstraint () 两 个 函数 定义 拖 放 移动 的 范围 。 

该 示例 在 06.dnd/04-08.html 中 。 


6.6 小结 


本 章 讲解 了 EXT 中 与 拖 放 有 关 的 知识 , 介绍 了 最 基本 的 拖 放 方式 和 EXT 中 拖 放 功能 的 简单 应 
用 ， 然 后 展示 了 EXT 中 的 拖 放 组 件 关 系 图 ， 并 介绍 了 3 大 类 拖 放 事件 流程 。 

最 后 以 YUI 中 的 拖 放 示例 为 基础 ， 讲 解 了 8 个 典型 示例 ;基础 (Basic)、 控 制 柄 〈Handle)、 
总 在 最 上 面 (On Top)、 代 理 〈Proxy)、 分 组 (Group)、 网 格 (Grid)、 拖 动 圆 形 (Cirele)、 拖 动 
范围 (Region)， 从 而 让 我 们 了 解 拖 放 的 高 级 配置 。 
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弹出 窗口 


本 章 内 容 

口 Ext .MessageBox 

OD 对 话 框 的 更 多 配置 

口 Ext .window 的 常用 属性 
D 窗口 分 组 

D 问 窗口 中 放 入 各 种 控件 


7.1 Ext .MessageBox 


从 外 观 上 来 讲 , 浏览 器 自 带 的 alert、confirm、prompt 等 对 话 框 并 不 好 看 , 而且 配置 也 不 灵活 。 
诸如 按钮 的 添加 、 删 除 ， 以 及 修改 按 下 按钮 所 触发 的 事件 等 操作 都 非常 难以 执行 。 

幸运 的 是 ， 这 些 功能 在 EXT 的 msgbox 里 都 能 实现 ， 而 且 外 观 也 很 漂亮 。 实 际 上 ，EXT 中 常 
用 到 的 MessageBox 也 是 一 种 特殊 的 窗口 (window) 。 窗 口 的 配置 很 简单 ， 可 以 任意 拖 动 ， 组 件 
可 以 任意 摆 放 ， 可 以 使 用 任何 控件 。 如 果 使 用 tab 进 行 切 换 ， 那 么 还 能 实现 窗口 的 最 大 化 。 

Ext .MessageBox 为 我 们 提供 了 弹出 提示 框 的 简单 方法 , 使 用 它 提供 的 alert、confirm、 prompt 
等 对 话 框 完全 可 以 替代 浏览 器 原生 的 alert、confirm、prompt 等 对 话 框 。 除 此 之 外 , Ext .MessageBox 
还 提供 了 诸如 进度 条 等 更 多 的 功能 。 


7.1.1 Ext.MessageBox.alert() 
下 面 我 们 先 看 一 下 消息 对 话 框 的 alert 对 话 框 示例 ， 代 码 如 下 所 示 。 


Ext .MessageBox.alert (' 标 题 '，' 内 容 ',， function(btn) { | 标题 EE xi 
alert {' 你 刚刚 点 击 了 ' + btn); : 内 容 | 
oe 
代码 运行 的 结果 如 图 7-1 所 示 。 和 Ba | | 
第 一 个 参数 可 用 于 修改 窗口 的 标题 ， 第 二 个 参数 用 于 决定 窗口 的 Co 
内 容 ， 第 三 个 参数 是 关闭 按钮 之 后 (无论 是 单 击 OK 按钮 ， 还 是 单 击 右 图， | sont 活 杠 


上 角 的 关闭 按钮 ) 就 会 执行 的 函数 ， 即 回调 函数 。 
在 此 ， 我 们 解释 一 下 回调 函数 的 作用 。 以 前 使 用 过 JavaScript 中 的 alert 的 读者 都 会 知道 ， 弹 出 
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系统 原生 的 alert 对 话 框 之 后 ， 整 个 脚本 都 会 变 成 阻塞 状态 ， 在 用 户 关闭 alert 对 话 框 之 前 脚本 不 会 
继续 向 下 执行 。 这 种 阻塞 效果 是 浏览 器 特有 的 功能 ， 在 JavaScript 中 无 法 模仿 这 种 效果 。 但是, 在 
实际 开发 中 确实 需要 知道 alert 对 话 框 在 何 时 被 关闭 了 ， 并 且 需 要 在 alert 对 话 框 关闭 后 执行 一 些 操 
人 为 了 保证 这 种 先后 的 执行 顺序 ， Ext .MessageBox 为 用 户 提供 了 回调 函数 ， 作 为 
Ext .MessageBox.alert () 的 第 三 个 参数 ， 这 个 回调 函数 会 在 alert 对 话 框 关闭 时 执行 。 

该 示例 在 07.window/01.html 中 。 


7.1.2 Ext .MegssageBox.confirm() 


confim 对 话 框 为 用 户 提供 了 两 个 选项 ，Yes 或 No， 它 们 会 在 需要 用 户 做 出 判断 时 用 到 。 最 常 
见 的 情况 是 ， 当 用 户 选 择 删除 某 个 数据 时 ， 系 统 会 弹出 对 话 框 询 问 用 户 是 否 确认 删除 操作 ， 这 样 
可 以 避免 用 户 因 为 误 操作 而 删除 数据 ， 如 下 面 的 代码 所 示 。 

Ext .MessageBox .confirm(' 选 择 框 '， :你 到 底 是 选择 ves 还 是 No? '，function(btn) 1 


alert (' 你 刚刚 点 击 了 ' + btn); 
#7 


运行 结果 如 图 7-2 所 示 。 园 择 窒 x 
因为 confirm 对 话 框 需要 在 用 户 选择 了 某 个 选项 时 进行 相应 的 0? 、 , 苏 到 | 响 是 选择 yes 
处 理 ， 所 以 回调 函数 是 必 不 可 少 的 。 “i no 
在 用 户 选 择 Yes 或 No 之 后 ， 回 调 函 数 即 被 调用 ，btn 参 数 的 值 es No 
可 能 是 yes 或 bo， 通过 它 可 以 知道 用 户 点 击 了 哪个 按钮 。 
该 示例 在 07.window/01.html 中 。 图 7-2 ”confirm 对 话 框 


7.1.3 Ext .MessageBox .prompt () 


prompt 对 话 框 为 用 户 提供 了 更 大 的 灵活 性 , 允许 用 户 输 入 一 段 字 符 串 ， 然后 提交 给 JavaScript 
处 理 。 它 还 提供 了 两 个 按钮 ， 用 户 可 以 决定 是 将 输入 的 内 容 提交 给 JavaScript, 还 是 取消 这 次 输入 
操作 ， 如 下 面 的 示例 所 示 。 

Ext .MessageBox .prompt (' 输 入 框 '，' 随 便 输入 一 些 东 西 '，function(btn, text) { 


alert (' 你 刚刚 点 击 了 ， + btn + '， 刚刚 输入 了 ，+ text); 
313 


运行 结果 如 图 7-3 所 示 。 
在 此 , 我 们 先 在 文本 框 中 输入 一 些 文字 , 然后 单 击 任何 输入 杠 “ 向 
一 个 按钮 ， 就 会 立刻 弹出 信息 提示 , 提示 的 内 容 为 刚才 单 击 随便 输入 一 些 东 丁 
的 按钮 和 输入 的 文字 。 
prompt 的 回调 函数 有 两 个 参数 : 第 一 个 参数 btn 代 表 用 | OK -站 、-caecal 
户 单 击 的 按钮 ， 可 能 是 OK 或 Cancel， 第 二 个 参数 ext 就 是 A 
用 户 刚 才 在 文本 框 中 输入 的 内 容 。 图 7-3 ”prompt 对 话 框 


该 示例 在 07.window/01.html 中 。 
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7.2 ”对 话 框 的 更 多 配置 


以 上 我 们 讨论 了 用 于 替换 浏览 器 原生 的 alert、confirm 和 prompt 的 3 个 函数 。 下 面 来 看 一 
下 Ext .MessageBox 提 供 的 其 他 功能 。 


7.2.1 可 以 输入 多 行 的 输入 框 


修改 原来 的 prompt 函 数 , 将 原来 只 能 接收 单行 字符 串 PP 
数据 的 文本 框 修改 为 可 以 支持 多 行文 字 的 形式 ， 如 图 7-4 你 本 凡夫 入 好几 厂 
所 示 。 

从 图 7-4 中 可 以 看 出 , 原来 的 Lextfield 现 在 已 经 变 成 
了 textarea。 不仅 如 此 , 我 们 还 修改 了 对 话 框 的 标题 和 提 
示 内 容 。 这 些 都 是 通过 Ext .MessageBox.show() 来 实现 
的 ， 它 接受 一 个 JSON 对 象 作 为 参数 ， 相 关 代 码 如 下 所 示 。 


Ext ,MessageBox .Show( 
title: ' 多 行 输入 框 ' ， 
msg: ' 你 可 以 输入 好 几 行 '， 
width:300, 
buttons: Ext .MessageBox .OKCANCEL, 
multiline: true, 
fn: function(btn, text) 1 


alert{ ' 你 刚刚 点 击 了 ' + btn + '， 刚 刚 输入 了 ' + text); 


图 7-4 ”多 行 输入 





} 
}); 


注意 Ext .MessageBox.show() 中 用 到 的 参数 ， 

口 Title 表示 弹出 对 话 框 的 标题 ; 

D Msg 表 示 在 弹出 对 话 框 中 显示 的 提示 内 容 ; 

口 Buttons 表 示 对 话 框 中 的 按钮 ，Ext .MessageBox 已 经 为 我 们 预 设 好 了 按钮 设置 。 这 里 使 
用 的 是 Ext .MessageBox .OKCANCEL， 即 显示 OK 和 Cancel 两 个 按钮 ; 

口 Multiline 表 示 可 以 输入 多 行内 容 ， 设置 为 true 之 后 便 自动 生成 一 个 textarea 供 我 们 使 
用 ; 

口 最 后 的 fn 表示 回调 函数 ， 它 会 在 用 户 关 闭 对 话 框 时 接收 并 处 理 我 们 需要 的 结果 。 


7.2.2 自 定 义 对 话 框 的 按钮 
我 们 还 可 以 使 用 Ext .Message.show() 设 置 对 话 框 中 按钮 的 样式 ， 如 下 面 的 代码 所 示 。 


Ext .MessageBox. show!{ 
title:' 随 便 按 个 按钮 '， 
msg: ! 从 三 个 按钮 里 随便 选择 一 个 ' ， 
buttons: Ext .MessageBox .YESNOCANCEL, 
fn: function{btn} { 

alert {' 和 你 刚刚 点 击 了 ' + btn); 

} 

jyY; 
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运行 结果 如 图 7-5 所 示 。 Ss 
这 次 我 们 依然 设置 了 title (标题 ) 、msg (提示 内 |e 
容 ) 、buttons (按钮 》 和 fn《〈 回 调 函 数 ) 等 参数 。 | 
我 们 为 buttons 参数 设 置 了 Ext .MessageBox. 
YESNOCANCEL， 这 样 可 以 在 弹出 的 对 话 框 中 看 到 3 个 按 、 
钮 。YESNOCaNCEL 是 定义 在 EXT 中 的 一 个 变量 ， 它 的 值 图 7-5 自 定义 按钮 
是 {yes :true, no:true，cancel:true)，Ext ,MessageBox 中 预 设 的 4 个 按钮 分 别 是 OK、Yes、 
No 和 Cancel。 如 果 不 使 用 YEsNOCANCEL 这 种 预 设 变 量 ， 也 可 以 直接 使 用 {ok:true,yes:true, 
no:true,cancel:true} 的 形式 ， 这 样 4 个 按钮 都 会 显示 在 对 话 框 中 。 


7.2.3 ”进度 条 


进度 条 经 常用 于 需要 用 户 等 待 某 一 操作 完成 的 场景 。 在 执行 一 些 十 分 耗 时 的 操作 时 ， 我 们 需 
要 用 它 来 提示 用 户 耐心 等 待 。Ext .MessageBox 为 我 们 提供 了 默认 的 进度 条 ， 只 要 将 progress 
参数 设置 为 Erue， 对 话 框 中 就 会 出 现 进度 条 ， 如 下 面 的 代码 所 示 。 


Ext .MessageBox.show!(t{ 
title: ' 请 等 待 '， 
msg: ' 读 取 数 据 中 ' ， 
width:240, 
progress:true, 
closable:false 

)); 


也 可 以 直接 使 用 Ext .MessageBox 提 供 的 progress 函 数 ， 如 下 面 的 代码 所 示 。 

Ext .MessageBox .progress{' 请 等 待 '，msg: “' 读 到 数据 中 ' ) ; 

其 运行 结果 如 图 7-6 所 示 。 

我 们 已 经 得 到 了 进度 条 ， 但 是 它 的 进度 状态 不 会 发 生变 ee 
化 (自动 向 前 推进 ) ， 需要 调用 Ext .MessageBox .update- er Ee 
Progress () 函数 让 进度 条 状态 发 生变 化 。 通常, 我 们 会 使 用 gs 
closable: false 来 隐藏 对 话 框 右上 角 的 关闭 按钮 ， 从 而 禁 国 
止 用 户 关 掉 进度 条 。 图 7-6 进度 条 

现在 ， 为 上 例 添 加 更 新 进度 条 的 功能 ， 我 们 使 用 Fimeout 定 时 器 对 进度 条 进行 修改 。 进 度 条 
的 状态 会 随 着 时 间 《〈 以 秒 为 单位 ) 而 变化 ，10 秒 之 后 整个 进度 条 对 话 框 将 隐藏 ， 如 下 面 的 代码 所 
No 


Yes No Cancel 


Var EE = functionmtv}t 
return function{)t 
if (wv == 11)( 
Ext .MessageBox.hide(}): 
lelsef 
Ext .MessageBox.updateProgress{v/10,，' 正 在 读 取 第 ， + v + ， 个 ,一共 10 个 。')，; 
} 
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ys 

for(var Lis 1 x 12; :i++){ 
setTimeout (f{i}, i*]1000); 

} 


除了 这 种 可 以 精确 控制 进度 的 进度 条 , 我 们 还 可 以 使 用 一 种 自动 变化 的 进度 条 提示 框 , 这 时 
要 使 用 Ext .Message.wait()。 

Ext .MessageBox.wait(' 请 等 待 '，msg: ' 读 取 数 据 中 '); 

这 时 弹出 的 对 话 框 中 的 进度 条 就 会 自动 向 前 推进 了 , 不 过 我 们 无 法 对 进度 条 的 值 进行 精确 控 
制 。 如 果 等 待 操 作 的 时 间 过 长 ， 进 度 条 满 格 之 后 又 会 从 零 开 始 向 前 推进 。 请 根据 具体 情况 选择 使 


用 Ext .MessageBox.progress () 或 Ext .MessageBox.wait{)。 


7.2.4 动画 效果 


我 们 可 以 为 对 话 框 设置 弹出 和 关闭 的 动画 效果 。 使 用 animE1 参 数 指定 一 个 HTML 元 素 ， 对 
话 框 就 会 依据 指定 的 HTML 元 素 播放 弹出 和 关闭 的 动画 。 我 们 把 前 面 的 示例 稍 作 修改 ， 加 入 
animE1 参 数 实现 动画 效果 ， 如 下 面 的 代码 所 示 。 


Ext .MessageBox.show!l! 
title:;' 随 便 技 个 按钮 '， 
msg: ' 从 三 个 按钮 里 随便 选择 一 个 ' ， 
buttons: EX ,MessageBox.YESNOCANCEL， 
fn: function(tbtn) { 


alert {' 你 刚刚 点 击 了 ' + btn}; 





}, 
animEl: ‘dialog'’ 
注 顽 ， 
animE1 参 数 的 值 是 一 个 字符 串 ， 它 与 HTML 中 的 一 个 元 素 的 ia 相 对 应 ， 例 如 <aiv 
id="dialog"></div>。 依 据 这 个 元 素 的 ia, 我 们 创建 的 对 话 框 才 知 道 根据 哪个 元 素 播放 弹出 和 
关闭 的 动画 。 
示例 在 07.window\01.html 中 。 
除了 Ext .MessageBox 的 基本 应 用 ， 实 际 使 用 时 还 需要 注意 以 下 两 点 。 
口 为 了 简化 调用 ， 可 以 把 Ext .MessageBox 直 接 写 成 Ext .Msg， 如 Ext.Msg.alert{)、 
Ext .Msg.confirm()、Ext.Msg.prompt() 等 。 
口 我 们 使 用 Ext .MessageBox 弹 出 的 对 话 框 都 是 基于 同一 个 内 部 Bxt .Window 实 例 的 ， 因 此 
不 能 使 用 Ext .MessageBox 弹 出 多 个 对 话 框 , 这 样 操作 的 结果 是 页 面 上 只 会 显示 最 后 -个 
窗口 。 这 个 问题 在 使 用 时 要 特别 注意 。 


7.3” ”Ext .window 的 常用 属性 


下 面 来 具体 讨论 一 下 window 的 基本 属性 和 应 用 。 从 外 表 来 看 , window 和 MessageBox 在 外 形 
方面 的 功能 很 相似 ， 因 为 Ext .MessageBox 内 部 也 是 基于 Ext .window 实 现 的 。 
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7.3.1 创建 窗口 
下 面 直接 使 用 window 创 建 自 定义 窗口 。 先 看 一 个 简单 的 示例 ， 如 下 面 的 代码 所 示 。 


Var win = new Ext .Window!t 
el:'window-win', 
layout:'fit', 
width:500, 
height:300, 
closeAction: 'hide', 


items: [{}]), 


buttons: [{ 
text:' 按 钮 ' 
}] 
}); 
win.show():; 
首先 要 注意 的 是 ， 上 面 的 winaow 需 要 一 个 对 应 的 HTML 元 素 。 我 们 用 el 参数 指定 了 
'window-win'， 这 对 应 HTML 中 的 <div id="window-win"></dGiv>。 我 们 通过 width 和 height 
参数 设置 宽度 和 高 度 ， 以 此 来 确定 窗口 的 整体 大 小 。 
其 次 ， 我 们 需要 设置 的 是 窗口 的 布局 类 型 ，1ayout : ' fit' 表 示 布 局 会 充满 整个 窗口 。 在 窗 
口 改变 大 小 时 , 内 部 组 件 也 会 进行 相应 的 调整 。 而 items 参 数 部 分 指定 的 是 窗口 中 放置 的 子 组 件 ， 
比如 表格 、 树 、 表 单 等 。 
closeAction:'hide' 是 一 个 常用 参数 , 它 用 来 控制 用 户 单 击 右上 和 角 的 关闭 图 标 后 会 执行 的 
操作 。 参 数值 'hiae' 表 示 关 闭 窗口 时 执行 隐藏 命令 ， 之 后 还 可 以 使 用 show() 函 数 显示 刚刚 关闭 
的 窗口 。 如 果 使 用 默认 的 'ciose'， 会 在 关闭 窗口 时 把 窗口 对 象 销毁 ， 那么 就 不 能 使 用 show() 
函数 来 显示 窗口 了 。 
如 果 不 想 让 用 户 使 用 右上 角 的 关闭 按钮 关闭 窗口 ， 可 以 设置 closable: false。 如 果 不 想 
让 用 户 随意 拖 动 窗口 的 位 置 ， 可 以 设置 draggable: true。 
Buttons 参 数 用 于 设置 显示 在 窗口 底 端的 按钮 。 我 们 演示 了 窗口 中 显示 一 个 按钮 的 效果 ,但 
是 没有 为 这 个 按钮 添加 事件 。 
现在 可 以 调用 show() ， 让 窗口 显示 出 来 ， 效 果 如 图 7-7 所 示 。 
图 7-7 中 部 的 空白 对 应 着 参数 items:[{]] 。 如 果 不 为 
items 中 的 子 组 件 指定 xtype， 那 么 默认 情况 下 会 生成 i 于 网 x 
Ext .Panel 类 型 的 对 象 ， 因 为 我 们 没有 为 items 中 设置 树 形 ， 
所 以 显示 出 来 就 是 空白 的 一 块 。 因 为 使 用 了 FitLayout 布 局 一 
方式 ， 所 以 窗口 内 部 的 Ext . Panel 也 会 根据 窗口 的 大 小 自动 we 
调整 自身 的 大 小 。 
该 示例 在 07.window\03-01.html 中 。 国生 弟 太 生 
Ext .Window 直 接 继承 自 Ext .Panel1， 可 以 使 用 Ext . Panel 中 定义 的 参数 对 窗口 进行 设置 ， 
包括 标题 、 上 方 和 下 方 的 工具 条 ， 以 及 内 容 的 折 和 登 展开 等 功能 。 
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7.3.2 窗口 的 最 大 化 和 最 小 化 
首先 ， 为 窗口 设置 参数 maximizable: true， 这 样 窗口 的 右上 和 角 会 出 现 表 示 最 大 化 的 按钮 ， 


如 图 7-8 所 示 。 
图 7-8 ”最 大 化 按钮 
单 击 最 大 化 按钮 后 ， 窗 口 自动 扩展 以 充满 整个 浏览 器 窗口 ， 并 且 右 上 角 的 最 大 化 按钮 会 变 成 
恢复 原来 大 小 的 按钮 。 


此 时 , 最 大 化 后 的 窗口 还 会 根据 浏览 器 大 小 而 自动 改变 , 它 会 随时 保持 完全 充满 浏览 器 窗口 。 
单 击 恢复 按钮 ， 窗 口 就 会 恢复 到 最 大 化 前 的 大 小 和 位 置 ， 如 图 7-9 所 示 。 


图 7-9 恢复 窗口 大 小 


最 小 化 窗口 的 操作 与 之 类 似 ， 首 先 为 窗口 设置 参数 minimizable: true， 窗 口 的 右上 和 角 会 
出 现 表 示 最 小 化 的 功能 按钮 ， 如 图 7-10 所 示 。 


图 7-10 ”最 小 化 按钮 


与 最 大 化 窗口 不 同 的 是 ， 单 击 最 小 化 按钮 并 不 会 触发 任何 操作 ，EXT 并 没有 为 窗口 预 设 最 小 
化 时 的 操作 ， 我 们 需要 根据 实际 情况 来 自 定 义 最 小 化 功能 。 有 两 种 实现 方法 ， 监 听 minimize 事 
件 和 重 写 minimize() 销 数 。 
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示例 分 别 在 07.window/03-02-01.html 和 07.window/03-02-02.html 中 。 


7.3.3 窗口 的 隐藏 与 销毁 


Ext .Window 中 包含 一 个 closeact ion 参 数 ， 这 个 参数 用 来 设置 在 关闭 窗口 时 执行 的 操作 ， 
可 以 选择 隐藏 或 销毁 ， 默 认 值 为 closeaction:'close'。 如 果 使 用 了 closeAction: 'close'， 
那么 当 用 户 单 击 关 闭 按钮 时 ，EXT 就 会 将 窗口 对 象 和 其 对 应 的 DOM 模 型 完全 销毁 ， 销 毁 了 的 窗 
口 无 法 通过 调用 show() 函数 显示 到 页 面 上 。 

常见 的 情况 是 ,我 们 创建 的 窗口 可 能 会 反复 使 用 多 次 。 用 户 希 望 关闭 窗口 后 ,还 可 以 通过 某 
种 途径 再 次 显示 这 个 窗口 。 虽 然 我 们 可 以 每 次 都 重新 创建 同一 类 型 的 窗口 ,但 反复 的 创建 和 销毁 
操作 会 使 效率 过 于 低下 。 常 用 的 方式 是 在 用 户 单 击 关 闭 按钮 后 并 不 销毁 窗口 ， 而 是 将 窗口 隐藏 。 
当 用 户 需 要 再 次 使 用 这 个 窗口 时 ,会 将 先前 隐藏 的 窗口 显示 出 来 ， 这 样 避 免 了 重复 的 创建 与 销毁 
操作 ， 大 大 提高 了 程序 的 效率 。 

EXT 为 这 种 情况 提供 了 对 应 的 参数 ， 我 们 只 需要 将 closeAction 的 参数 值 设置 为 'hide' 就 
可 以 实现 上 述 功能 。 设 置 过 closeAction: 'hide' 的 窗口 在 用 户 单 击 关 闭 按钮 时 就 会 自动 隐藏 ， 
之 后 可 以 调用 show() 函数 将 它 显示 出 来 。 

如 果 不 愿意 借助 EXT 的 内 置 功能 , 而 是 希望 自己 编写 函数 控制 窗口 的 隐藏 与 显示 ， 那 么 我 们 
也 可 以 使 用 Ext .window 提 供 的 函数 hige () 和 show()。hide() 函数 用 于 隐藏 窗口 ， show{) 明 数 
用 于 显示 窗口 。 与 closeaction:'close' 对 应 的 是 closel ) 函数， 执行 close() 函数 就 会 销毁 对 
应 窗口 ， 销 毁 后 的 窗口 也 不 能 再 次 显示 了 。 

与 窗口 关闭 相关 的 配置 还 有 closable 参 数 ， 它 的 默认 值 为 true。 默 认 情况 下 ， 窗口 都 会 在 
右上 角 显 示 关 闭 按钮 ， 如 果 设 置 为 closable:false， 就 会 隐藏 关闭 按钮 ， 效果 如 图 7-11 所 示 。 


图 7-11 隐藏 关闭 按钮 


既然 关闭 按钮 已 经 被 隐藏 ,我 们 就 无 法 使 用 closeAction 来 配置 关闭 窗口 的 操作 了 。 这 时 就 
需要 来 用 其 他 方法 ， 通 过 手工 调用 函数 close () 或 hide() 来 实现 关闭 窗口 的 功能 。 
既然 是 手动 调用 ， 我 们 需要 首先 定义 一 个 窗口 ， 代 码 如 下 所 示 ; 


Win = new Ext.Window({ 
el:'window-win', 
width:300, 
height :100, 
closable: false 

}) 
win.show(); 


然后 在 HTML 中 定义 3 个 按钮 ， 如 下 面 代码 所 示 ; 
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<button onclick="win.show()">win.show{(}</button> 
<button onclick="'win.hide()">win.hide(}</button> 
<button onclick="win.close{)}">win.close(}</button> 


点 击 这 3 个 按钮 看 看 效果 。 
示例 在 07.window/03-03.html 中 。 


7.3.4 防止 窗口 超出 浏览 器 


默认 配置 上 上， 窗口 可 以 移动 到 任何 位 置 ， 甚 至 可 能 超出 浏览 器 的 边界 。 这样 有 时 会 导致 一 些 
问题 , 例如 ， 当 窗口 的 位 置 过 于 靠近 浏览 器 的 上 边界 时 , 会 遮 住 顶 部 的 关闭 按钮 ， 如 图 7-12 所 示 。 


图 7-12 ”窗口 超出 浏览 器 


为 了 避免 这 种 问题 ， 我 们 应 该 限制 窗口 的 移动 范围 ， 让 它 始终 保持 在 浏览 器 的 可 视 范围 内 。 
这 时 可 以 选择 使 用 参数 constrain 和 constrainHeader， 它 们 分 别 用 来 限制 窗口 的 整体 和 窗口 
的 项 部 不 能 超越 浏览 器 的 边界 。 

使 用 constrain:true 的 情况 如 下 面 的 代码 所 示 。 


Win = new Ext .Window!! 
el: 'window-win', 
width:300, 
height:100, 
title: ‘header', 
html: ‘body'’, 
constrain: true 


}); 
运行 结果 如 图 7-13 所 示 。 





图 7-13 ”设置 整个 窗口 不 超出 浏览 器 边界 


constrain 保 证 整个 窗口 不 会 越过 浏览 器 的 边界 ， 完 整地 显示 在 浏览 器 中 。 
使 用 constrainHeader:true 的 情况 如 下 面 的 代码 所 示 。 


win = new EXt .如 inaowf{ 
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el: 'window-win', 

width:300, 

height:100, 

title: 'header', 

htmls:s body', 

constrainHeader: true 
}); 


运行 结果 如 图 7-14 所 示 。 

header X 

图 7-14 只 设置 窗口 项 部 不 超出 浏览 器 边界 
constrainHeader 只 保证 窗口 的 顶部 都 不 会 越过 浏览 器 的 显示 边界 ， 而 窗口 的 内 容 部 分 可 


以 超出 浏览 器 的 边界 。 
上 面 的 两 个 示例 分 别 在 07,window/03-04-02.html 和 07.window/03-04-03.html 中 。 


7.3.5 设置 窗口 中 的 按钮 
可 以 通过 buttons 参 数 指定 窗口 下 部 的 按钮 ， 如 代码 清单 7-1 所 示 。 


代码 清单 7-1 指定 窗口 下 部 的 按 饵 


Var win = new Ext .Window!(t{ 
el:'winGow-win'， 
wiadth:300, 
height:100, 
closeAction: 'hide', 


buttons: [{ 
cext: ' 确 定 ' 
pe 
text : ' 取 消 ' 
}] 
EY 


运行 结果 如 图 7-15 所 示 。 
这 里 设置 了 “确定 ”和 “取消 ”两 个 按钮 。 默认 情况 下 ， 生 成 的 按钮 会 以 右 对 齐 的 方式 排列 。 
如 果 我 们 希望 这 些 按钮 居中 对 齐 〈 见 图 7-16) ， 可 以 设置 buttonAlign: 'center' 参 数 。 


xX . x 
确定 取消 确定 昌 示 


图 7-15 ”窗口 下 部 的 按钮 图 7-16 ”按钮 居中 对 齐 
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buttonAlign 可 以 使 用 的 参数 有 3 个 : left、center 和 right， 分别 代 表 左 对 齐 、 居 中 对 齐 
和 右 对 齐 。 如 果 没 有 设置 buttonalign， 则 默认 使 用 右 对 齐 的 方式 对 按钮 进行 排列 。 

该 示例 在 07.window/03-05-02.html 中 。 

与 按钮 相关 的 设置 还 有 defaultButton 参 数 ， 它 用 于 在 窗口 弹出 后 ， 默 认为 用 户 选 择 一 个 
按钮 ( 见 图 7-17〉。 


网 守 限 少 


图 7-17 设置 默认 选中 的 按钮 


上 例 中 ， 我 们 使 用 了 defaultButton:0， 将 第 一 个 按钮 设置 为 默认 选中 状态 。 如 果 此 时 按 
下 键盘 上 的 回 车 键 , 就 会 执行 单 击 “ 确 定 ” 按 钮 后 的 操作 。“ 确 定 ” 按 钮 对 应 的 操作 是 win .hiae ()， 
它 会 隐藏 当前 窗口 , 也 就 是 说 只 需要 按 下 回 车 键 就 可 以 关闭 这 个 窗口 , 无 需 再 用 鼠标 单 击 “确定 ” 
按钮 。 代 码 如 下 所 示 : 


Var win = new Ext .Window!t 
Bl: 'window-win', 7 
width:300, 


height :100, 
closeAction: ‘hide', 
defauitButton: 0, 


buttons: [{ 
text : ' 确 定 '， 
handler: function() { 

win.hide(); 

} 

3 
text: ' 取 消 ' 

}] 

})s 


win.showt{); 


7.3.6 ”窗口 的 其 他 配置 选项 


我 们 可 以 使 用 resizable 控 制 窗口 是 否 可 以 通过 拖 放 改 变 大 小 ,在 设置 resizable:true 时 ， 
还 可 以 为 窗口 设置 对 应 的 resizeHandles， 从 而 控制 拖 放 的 方式 〈 见 图 7-18) 。 代 码 如 下 所 示 : 


var win = new Ext .Winaow(i 
el: 'window-win', 
width:300, 
height :100, 
closeAction: 'hide', 
resizaplje: true, 
resizeHandles: 'se' 

}}s 
win.show!(}); 
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在 某 些 情况 下 ,我 们 希望 弹出 窗口 之 后 立即 屏蔽 掉 页 面 上 所 有 的 其 他 组 件 ， 只 有 在 窗口 关闭 
后 才能 继续 操作 其 他 组 件 ， 这 时 可 以 使 用 modal :true 参 数 。EXT 会 为 设置 了 modal :true 参 数 的 
窗口 自动 生成 一 个 半 透 明 的 DIV， 用 这 个 DIV 将 整个 页 面 遮 单 起来， 以 此 模拟 使 整个 页 面 变 灰 失 
效 的 效果 ， 如 图 7-19 所 示 。 


图 7-18 ” 拖 放 改变 窗口 大 小 图 7-19 ”模拟 页 面 变 灰 失效 的 效果 


如 果 你 希望 使 窗口 展示 弹出 并 缩 回 效果 的 动画 ， 可 以 用 animateTarget 指 定 弹出 并 缩 回 效 
果 的 HTML 元 素 ， 如 下 面 的 代码 所 示 。 


var win = new Ext .WinGow({ 
el: 'window-win', 
width:300, 
height:100, 
closeAction:'hide', 
animateTarget: 'target' 
$3 


还 可 以 使 用 plain:true 参 数 对 窗口 内 容 部 分 进行 美化 , 如 图 7-20 所 示 , 可 以 看 到 整齐 的 边框 。 


x 


图 7-20 ”使 用 plain 修 饰 后 窗口 
该 示例 在 07.window/03-06-04.html 中 。 


7.4 窗口 分 组 


在 EXT 中 ， 窗 口 是 分 组 进行 管理 的 ， 我 们 可 以 对 某 一 组 中 的 窗口 执行 特定 的 操作 。 默 认 情 况 
下 ， 窗 口 都 在 Ext .windowMgr 组 中 。 窗 口 分 组 由 Ext .WindowGroup 类 定义 ， 该 类 包括 


bringToFront、getactive、hideaLl1、sendToBack 等 图 数 ， 可 以 用 来 操作 分 组 中 的 窗口 。 窗 
口 分 组 的 实现 过 程 如 代码 清单 7-2 所 示 。 


代码 清单 7-2 ”窗口 分 组 
var i = 0, mygroup; 


function newWin() { 
var win = new Ext.Wwindowt{{title:" 黎 口 "+i++, 
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width: 400, 
height: 300, 
maximizable: true, 
manager: mygroup 


Es 
win.show!(); 


} 


function toBack() { 
mygroupn.sendToBack (mygroup.getActive{)); 
} 


function hideAli{) { 
mygroup.hideAll(); 
} 


Ext .onReady {function{()}){ 
mygroup = new Ext .WindowGroup{); 


Ext .get ("btn") .on("click",newWin); 

Ext .get ("btnToBack"} .on{"click",toBack); 

Ext ,get ("btnHide*") .on("click",hideAll); 
}1); 


页 面 中 对 应 的 HTML 部 分 如 下 面 的 代码 所 示 。 


<input id="btn" type="button" name="add"* value=" 新 窗口 * /> 
<input id="btnToBack"” type="*button"” name="add"* value=" 放 到 后 台 * /> 
<input id="ptnHide" type="button" name="add"” value=" 隐 藏 所 有 " /> 


执行 上 面 的 代码 , 可 以 先 通 过 “新 窗口 ”按钮 新 建 几 个 窗口 。 因 为 没有 设置 窗口 弹出 的 坐标 ， 
所 以 生成 的 这 些 窗口 会 重 登 在 一 起 。 我 们 需要 拖 动 这 些 窗 口 ， 把 它们 排列 在 屏幕 中 不 同 的 位 置 。 
然后 单 击 “ 放 到 后 台 ” 按 钮 ， 可 以 把 某 一 个 窗口 移 到 该 组 窗口 的 最 后 面 。 单 击 “ 隐 藏 所 有 ”按钮 ， 
可 以 隐藏 当前 打开 的 所 有 窗口 ， 如 图 7-21 所 示 。 


| 隐语 和 山 汪 所 潜 | 


oo FE 


图 7-21 窗口 组 
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该 示例 在 07.window\04.html 中 。 


7.5 向 窗口 中 放 入 各 种 控件 


在 EXT 中 ， 窗 口 (Window) 继承 自 Ext .Panel， 因 此 它 也 支持 在 内 部 和 其 套 其 他 组 件 ， 实 现 
各 种 复杂 的 布局 。 


7.5.1 在 窗口 中 加 入 表格 


首先 ， 创 建 一 个 表格 。 我 们 这 里 直接 使 用 第 3 章 的 示例 ， 唯 一 的 区 别 是 创建 表格 之 后 不 必 使 
用 render () 函数 进行 演 染 ,而 是 将 它 加 入 窗口 的 items 参 数 中 ,让 窗口 负责 对 表格 进行 布局 ， 效 
果 如 图 7-22 所 示 。 


病人 写 可 入 沿 壕 


named 


控 证 


图 7-22 ”窗口 中 的 表格 


图 7-22 显 示 的 是 一 个 最 基本 的 表格 ， 我 们 还 可 以 根据 第 3 章 中 介绍 的 功能 为 它 设置 分 页 工具 
条 、 排 序 、 右 键 菜单 等 功能 。 实 际 上 ， 我 们 只 需要 单独 创建 一 个 表格 ， 配 置 好 需要 的 功能 ， 然 后 
将 它 放 入 窗口 中 就 可 以 了 。 

现在 我 们 来 看 一 看 在 窗口 中 使 用 表格 时 需要 注意 的 一 些 问 题 。 

D 表格 不 再 需要 调用 render () ， 窗 口 会 在 显示 时 自动 泻 染 内 部 的 组 件 。 

D 在 窗口 中 设置 表格 时 ， 需 要 把 表格 加 入 到 窗口 的 items 参 数 中 ， 如 下 面 代 码 所 示 。 

Var cm = new Ext .gr1ld.ColurnModel([ 

{fheader: ' 编 号 ' ,GataTndex:'ia')， 


{header:' 名 称 ' ,GataIndex: 'name'}， 
{header:' 描 述 ' ,datalndex: 'descn']】 


1', 'namel', ‘descnil' 
2','name2','descn2' 
3','name3', 'descn3' 
4','named', ‘descn4' 
'5','name5’','descn5' 


ED WD RD 
和 
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var ds = new Ext.data.Storel!1 
proxy: new Ext.data.MemoryProxy (data), 
reader: new Ext.data.ArrayReader({}, | 
{name: ‘id'}, 
{name: ‘name'}, 
{name: ‘descn'} 
] ) 
Fis 
ds.10ad!{); 


Var grid = new Ext .grid.GridPpanel(t 
el': “grid', 
ds: ds, 
cm: cm, 
layout:'fit'"' 


var win = new Ext .Window(t{ 
el window-win'， 
Lavouts flit 
width:500, 
height :300, 
closeAction: 'hide', 





items: [griaQl] ， 


buttons: [({ 
ext :+ 按 钮 ， 
}] 
电光 


win.show( ) ; 





注意 ”items 参 数 的 值 是 一 个 数组 ， 我 们 可 以 单独 使 用 一 个 表格 ， 也 可 以 同时 添加 多 个 组 件 ， 





该 示例 在 07.window\05-01.html 中 。 


7.5.2 在 窗口 中 加 入 表单 


表单 也 可 以 直接 放 到 窗口 中 ,我 们 准备 一 个 简单 的 表单 来 演示 效果 , 实现 过 程 如 代码 清单 7-3 
所 示 。 


代码 清单 7-3 ”设置 表单 


Var form = new Ext.form.FormPanel(t{ 
labelAlign: 'right', 
1abelwiaGth: 50, 
frame: true, 
defauitType: ‘textfield', 
items: [{ 

fieldLabel: ' 文 本 '， 
name; 'text' 
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jt 
fieldLabel: ' 日 期 '， 
name: 'data', 
| xtype: ‘'datefield' 
}}); 
其 他 配置 基本 不 变 ， 只 是 去 掉 了 title 参 数 ， 因 为 窗口 自身 提供 了 标题 部 分 ， 在 窗口 中 只 显 
示 一 个 组 件 的 情况 下 ， 不 需要 重复 设置 标题 。 我 们 把 wiath 属 性 也 去 掉 了 ， 因 为 之 后 会 把 表单 交 
给 窗口 进行 布局 管理 ， 窗 口中 使 用 了 layout :'fit' 布 局 方式 ， 最 终 表单 会 根据 窗口 的 大 小 进行 
伸缩 ， 不 需要 额外 设置 宽度 了 。 
窗口 的 配置 与 上 面相 似 ， 只 是 将 items: [grid] 改 成 items: [form] ， 这 样 就 实现 了 在 窗口 
中 加 入 表单 的 效果 ， 如 图 7-23 所 示 。 


form x 


文本 : 
日 期 ; 


瞩 钮 


图 7-23 ”窗口 中 的 表单 
该 示例 在 07.window\05-02.html 中 。 


7.5.3 复杂 布局 
图 7-24 显 示 了 在 窗口 中 显示 多 个 组 件 的 情况 。 


估 意 坦 沿 
与 儿 ， 获 认 标 苹 理 党 霄 


图 7-24 复杂 布局 


在 图 7-24 中 ， 我 们 将 窗口 分 隔 成 两 个 部 分 ， 左 侧 放 置 导航 用 的 工具 条 ， 并 且 为 工具 条 设置 了 
折 登 功能 ， 折 县 后 的 效果 如 图 7-25 所 示 。 右 侧 显示 的 是 一 个 包含 3 个 面板 的 Ext .TabPanel, 它 的 
每 个 面板 都 有 独立 的 标题 和 内 容 ， 第 三 个 面板 还 可 以 由 用 户 决定 是 否 关闭 。 
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牌 杂 癌 局 其 
就 类 所 等 哥 美 闭 “ 
内 容 


图 7-25 面板 折 生 效果 
该 示例 的 实现 过 程 如 代码 清单 7-4 所 示 。 
代码 清单 7-4 ”窗口 中 的 rabPanel 


Var tabs = new Ext .TabPanel({ 
region: 'center', 
marginess: "a 3 兴 1 
activeTab: 0, 
defauits: {autoSscroll:true}, 





iterms :TIT{ 
title; “默认 …， 
html: ' 内 容 ' 
ya 
title: :标签 ' ， 
html: 内容， 
} 5 


title: :可 关闭 ' ， 
html: ' 内 容 '， 
closable:true 
}] 
下 


var nav = new Ext.Panell(t{ 
title: ' 导 航 '， 
region: ‘'west', 
split: true, 
width: 200, 
collapsible: true, 
margine:'3 0 3 34， 
CMargines "3 3 3 3' 


Var win = new Ext .Window(t{ 


title: ' 复 杂 布 局 '， 
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closable:true, 
width:600, 

height :350， 
border: false, 
layout: 'border', 


items: [nav, tabs] 
区 关 | 


win.show{); 


示例 中 为 窗口 指定 了 layout :'border' 布 局 方式 。 我 们 将 创建 好 的 nav 和 tabs 对 象 放 到 
items 参 数 中 ， 窗口 就 会 在 显示 时 使 用 border 边 界 布局 方式 控制 nav 和 tabs 的 位 置 和 大 小 。 当 窗 
口 改 变 大 小 时 ， 内 部 组 件 也 会 自动 调整 自身 大 小 来 适应 窗口 的 变化 。 

有 关 布 局 的 更 多 内 容 ， 请 参考 第 8 章 ， 


7.6 ”小结 


本 章 先 介绍 了 如 何 使 用 Ext .MessageBox 实 现 多 种 对 话 框 ， 同 时 介绍 了 自 定 义 对 话 框 的 方 
法 : 让 对 话 框 支持 多 行 输入 、 自 定义 对 话 框 的 按钮 、 在 对 话 框 中 显示 进度 条 并 为 对 话 框 提供 动画 
效果 等 。 

然后 ， 讲 解 了 Ext .window 的 常用 属性 ， 包 括 创 建 简单 窗口 、 控 制 窗口 的 最 大 化 和 最 小 化 、 
配置 窗口 的 关闭 类 型 、 控 制 窗口 的 移动 范围 、 设 置 窗口 中 的 按钮 等 。 

最 后 讲解 了 窗口 分 组 的 实现 方式 ， 以 及 如 何 操作 同一 组 中 的 多 个 窗口 。 此 外 ， 还 讲解 了 窗口 
的 内 部 布局 功能 ,介绍 了 如 何在 窗口 中 显示 表格 和 表单 面板 ， 以 及 如 何在 窗口 中 使 用 复杂 布局 方 
式 。 
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布 局 








本 章 内 容 

D 布局 的 用 途 

口 最 简单 的 布局 FitLayout 

口 常用 的 边框 布局 BorderLayout 

口 制作 伸缩 菜单 的 布局 Accordion 
口 实现 操作 向 导 的 布局 CardLayonut 
口 控制 位 置 和 大 小 的 布局 AnchorLayout 和 AbsoluteLayout 
.表单 专用 的 布局 FormLayout 

口 分 列 式 布 局 ColamnLayout 

Q 表格 状 布局 TableLayout 

9 与 布局 相关 的 其 他 知识 





8.1 布局 的 用 途 


所 谓 布局 ,简单 来 说 就 是 决定 把 什么 东西 放 到 什么 位 置 上 。 对 管理 软件 来 说 , 一 般 是 首部 放 
标题 ， 左 边 放 菜 单 栏 ， 空 余 的 右 下 方 用 来 显示 具体 的 内 容 ， 如 图 8-1 所 示 。 


www. family168. com 出 品 


菜单 1 主要 内 容 
菜单 2 


图 8-1 简单 布局 示例 
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图 8-1 中 的 布局 形式 比较 传统 。 在 EXT 中 制作 这 种 传统 形式 的 布局 比较 简单 ， 使 用 下 面 的 配 
置 内 容 就 能 实现 ， 如 代码 清单 8-1 所 示 。 


代码 清单 8-1 ”在 EXT 中 实现 传统 布局 


var Viewport = new Ext .Viewport!(t{ 
layout: 'border', 
items: [1 
region: ‘'north', 
height: 40, 
html: ‘<hli>www.family168.com 出 上 品 </h1i>' 


region: ‘west', 
width: 100, 
html : '<p> 菜 单 1</p><p> 菜 单 2</p>' 


region: ‘center', 


html : ' 主 要 内 容 ' 


过 


在 上 面 的 代码 中 ， 我 们 用 Ext .Viewport 类 对 整个 页 面 进行 了 整体 布局 。 这 个 类 的 具体 用 法 
稍 后 会 详细 解释 ， 我 们 现在 主要 看 看 它 里 面 是 如 何 布局 的 。 

Ext .Viewport 里 主要 有 两 个 配置 参数 : layout 和 items。 其 中 layout :'border' 表 示 我 们 
使 用 了 BorderLayout 的 布局 方式 ， 这 种 布局 方式 称 为 边界 布局 ， 它 将 页 面 分 隔 成 东 、 西 、 南 、 北 、 
中 5 个 部 分 ， 我 们 使 用 region 参 数 为 它 里 面 的 组 件 指定 了 具体 的 放置 位 置 。 它 里 面 的 组 件 就 定义 
在 items 参 数 里 。items 中 定义 了 3 个 部 分 ， 分别 是 放 在 上 方 的 region:'north' ， 左 边 的 
region:'west' 和 位 于 中 间 的 region:'center'。 从 HTML 部 分 的 内 容 也 可 以 看 出 页 面 上 显示 
的 部 分 究竟 对 应 着 代码 中 的 哪些 部 分 。 

上 面 的 代码 实现 了 一 个 布局 好 的 页 面 , 完整 的 代码 可 以 在 01.html 中 找到 。 虽然 它 现在 还 略 显 
粗粮 , 但 也 可 以 自动 检测 浏览 器 的 大 小 变化 和 自动 调整 布局 中 每 个 部 分 的 大 小 。 你 可 以 打开 示例 
页 面 ， 用 鼠标 调整 浏览 器 的 大 小 ， 这 时 就 会 看 到 页 面 中 的 布局 也 会 随 着 浏览 器 的 大 小 实时 变化 。 

在 EXT 中 ， 所 有 的 布局 都 是 从 Ext .container 开 始 的 ，Ext .Container 的 父 类 是 Ext .Box- 
Component 。Ext .BoxComponent 是 一 个 盒子 组 件 ， 可 以 定义 宽度 、 高 度 和 位 置 等 属性 。 作 为 子 
类 的 Ext .Container 也 继承 了 父 类 的 这 些 功 能 ， 更 重要 的 是 ，Ext .container 可 以 使 用 1ayout 
和 items 属 性 为 内 部 的 子 组 件 进行 布局 。 

图 8-2 是 Ext .Container 以 及 它 的 子 类 的 继承 图 。 

根据 继承 原理 ， 只 要 是 Ext ,Container 的 子 类 都 可 以 使 用 layout 对 内 部 items 进 行 布局 。 

事实 上 , 我 们 经 常用 来 设置 布局 的 子 类 只 有 几 个 , 如 用 Ext .Viewport 进 行 页 面 的 整体 布局 ， 
使 用 Ext.Panel 和 Ext.Window 进 行 各 种 嵌 套 布局 ， 使 用 Ext .form.Fieldset 和 Ext .form. 
FormPane1l 为 表单 进行 布局 。 其 余 的 子 类 都 使 用 默认 的 演 染 形式 ， 很 少 进行 内 部 布局 。 

与 Ext .Container 相 似 ， 所 有 的 布局 类 也 有 一 个 共同 的 超 类 Ext .layout .Container- 
Layout。 几 是 继承 自 该 超 类 的 子 类 都 可 以 对 Ext .Container 和 它 的 子 类 进行 布局 定义 ， 这 两 棵 
继承 树 结合 在 一 起 便 构 成 了 EXT 中 完整 的 布局 系统 ， 如 图 8-3 所 示 。 
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A 


EXt Container 


Extnyout contanerLayon™ 





Extnyout AnchorLayom 
Ext layout RpeonteLayou 
“Ext layout FormLayout 
EC TO Fieldset Mie 
下 CID 


“Extform FormPpanel 
“Exttree TreePanel’” 


Et rd Griopanel” 
"Ext oid Edtororiapaner 
"Ee 


“Ext layout Accordion 
Extlayout .CaraLayout 
-Extlayout TableLayaut™ 





图 8-2 container 及 其 子 类 继承 图 图 8-3 布局 类 型 继承 图 


上 述 示例 中 用 到 的 边框 布局 Ext .1ayout .BorderLayout 处 于 整个 树 形 继承 图 的 中 间 部 位 ， 
其 他 常用 到 的 布局 还 有 用 于 表单 布局 的 FormLayout、 实现 分 列 布局 的 ColumnLayout 和 自动 填充 整 
个 布局 空间 的 自 适 应 FitLayout。 除 此 之 外 ,还 有 绝对 位 置 布局 AbsoluteLayout、 折 用 布局 Accordion、 
锚 点 布局 AnchorLayout、 卡 片 布局 CardLayout、 容 器 布局 ContainerLayout 和 表格 布局 TableLayout。 


8.2 ”最 简单 的 布局 一 一 FitLayout 


有 一 个 很 简单 的 需求 : 客户 需要 页 面 里 显示 一 个 表格 ， 让 它 可 以 自动 适应 页 面 大 小 的 变化 ， 
页 面 变 大 的 时 候 表格 也 会 变 大 ， 页 面 变 小 的 时 候 表格 也 会 随 之 变 小 。 

要 想 实 现 这 样 的 功能 ,你 是 不 是 又 会 想到 先 去 监听 页 面 触发 的 事件 , 然后 用 得 到 的 页 面 大 小 
去 修改 表格 呢 ? 试 试 EXT 提 供 的 FitLayout 吧 , 看 看 它 是 如 何 实现 这 个 功能 的 , 如 下 面 的 代码 所 示 。 


Var viewport = new Ext .Viewportcii 
Layouts: fit" 
items: [gridl 

})3 


我 们 把 Viewport 中 的 1ayout 修 改 为 'fit'， 再 把 预先 创建 好 的 表格 放 到 items 中 ， 这 样 就 
能 得 到 如 图 8-4 的 效果 〈 见 02-01.html)。 

就 这 样 ， 我 们 利用 表格 实现 了 预期 的 效果 ， 表 格 填充 了 整个 页 面 ， 并 且 它 自身 的 大 小 会 根据 
页 面 的 大 小 而 变化 。Ext .layout .FitLayout 虽 然 简单 ， 但 还 是 有 几 点 需要 注意 。 首 先 ， 使 用 了 
layout: 'fit' 组 件 的 items 只 能 放 一 个 子 组 件 。 即 使 放 了 多 个 子 组 件 ， 也 只 有 第 一 个 子 组 件 会 
起 作用 。 例 如 ， 我 们 将 02-01.html 修 改 为 如 下 《〈 见 02-02.html) 所 示 。 
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Var viewport = new Ext.Viewport{(t 
Tavauts: ot, 
items: I[{ 
titie: ‘panel', 
html: 'Panel， 
},grid)] 
})’» 


如 果 像 上 面 代码 一 样 , 在 原来 的 表格 前 面 添 加 一 个 panel, 最 后 显示 的 结果 就 会 如 图 8-5 所 示 。 


grid PR 
座舱 修改 删 阶 Sin] 
由 老 粮 榴 六 
9 Nnameg desc3 过 | 
久生 。 买 医 1 页 
图 8-4 FitLayonut 布 局 图 8-5 在 FitLayout 中 设置 多 个 panel 
因为 在 表格 的 前 面 添加 了 panel， 所 以 表格 失效 了 ， 最 后 得 到 的 页 面 中 就 只 能 看 到 排 在 最 前 
面 的 panel。 


还 有 一 个 问题 就 是 在 items 中 的 表格 里 千 万 不 要 使 用 autoHeight :true 参 数 , 这 个 参数 会 使 
FitLayout 失 效 。 它 会 重新 计算 表格 的 高 度 ， 最 后 得 到 的 表格 也 就 无 法 填充 整个 页 面 了 。 使 用 了 
autoHeight :true 的 示例 可 以 参考 02-03.html 和 02-04.html，02-03.html 的 效果 如 图 8-6 所 示 。 

02-03.html 中 表格 的 高 度 超 过 了 页 面 高 度 ， 不 但 没有 显示 滚动 条 ， 连 下 面 的 分 页 工具 条 也 被 


挤 出 了 页 面 。 
02-04.html 的 效果 如 图 8-7 所 示 。 
wid grid 
座 加 公约 市 除 府 胡 作 避 删除 
Ls| 名 梯 仪 六 Id 名 入 起 述 
1 marne1 desc] 1 naerhef1 desc1 
2 name2 tesc 2 name2 Ges 
3 fames esc3 3 neme3 tesc3 
站 narne4 (后 S54 站 ramed descd 
5 ees dssc5 TE < 区 并 工 习 | ? 
5 nermes desc6 
7 name desc7 
日 Named desca 
9 Nemeg desc9 
图 8-6 ”使 用 了 autoHeight :true 的 示例 (1) 图 8-7 使 用 了 autoHeight :true 的 示例 (2) 
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在 02-04.html 中 ， 表 格 的 高 度 小 于 页 面 高 度 ， 整 个 表格 收缩 了 起 来 ， 没 有 填 满 整 个 页 面 。 因 
为 参数 autoHeight 是 定义 在 Ext ,Boxcomponent 中 的 ， 继 承 了 它 的 子 类 都 可 能 会 遇 到 图 8-7 中 的 
问题 ， 所 以 当 布局 出 现 问 题 时 ， 可 以 考虑 检查 一 下 是 不 是 由 于 这 个 参数 造成 的 。 

因为 之 前 的 示例 都 是 使 用 Ext .Viewport 进 行 整个 页 面 范围 的 布局 控制 ， 所 以 最 后 我 们 提供 
一 个 在 Ext .window 中 用 于 局 部 布局 的 示例 供 大 家 参考 ， 如 下 面 的 代码 所 示 。 


var win = new Ext .Window!{ 
width: 400, 
height: 300, 
Layvoubs sit 
items: [griG] 








| 有 抽 史 

从 上 面 的 代码 可 以 看 出 , 1ayout 和 items 4 半 光志 
的 部 分 基本 上 是 相同 的 ， 只 是 将 原来 的 类 名 由 ee Nee 
Ext .Viewport 换 成 了 Ext .Window, 并 且 再 加 、 eee i 
上 了 Ext.Wwindow 需 要 的 width 和 heigth 参 Son me 
数 。 这 样 就 成 功 地 把 原来 放 在 Ext .Viewport 
中 的 表格 移植 到 了 Ext .window 窗 口中 ， 以 后 
表格 将 会 适应 Ext .Window 的 大 小 变化 ， 而 不 
是 根据 整个 页 面 的 大 小 调整 自己 的 大 小 。 要 六 1 
所 未 人 图 8-8 在 Ext.window 中 使 用 FitLayonut 

示 

8.3 ”常用 的 边框 布局 一 一 BorderLayout 


因为 FitLayout 布 局 每 次 只 能 使 用 一 个 子 组 件 ， 根 本 无 法 胜任 更 复杂 的 布局 需求 ， 所 以 现实 中 
我 们 使 用 得 最 多 的 是 Ext.layout.BorderLayout 布 局 。 它 将 整个 布局 区 域 分 成 了 东 、 西 、 南 、 北 、 中 
5 个 部 分 。 除 了 中 间 区 域 以 外 ， 其 他 的 区 域 又 都 是 可 以 省 略 的 ， 因 此 我 们 可 以 利用 它 制作 出 更 复 
杂 、 更 灵活 的 布局 。 

在 本 章 的 第 一 个 示例 中 ， 我 们 就 已 经 见 过 layout : 'border' 以 及 region:'center' 制 作 的 
效果 了 。 这 里 再 实现 一 个 完整 的 示例 ， 如 代码 清单 8-2〈 见 03-00.html) 所 示 。 


代码 清单 8-2 ”用 BorderDayeut 实 现 一 企 完 整 的 布局 


Var Viewport = new Ext .Viewport!(t 

layout: 'border', 

items: [ 
{region: 'north',html: 'north'}, 
{region:'south',html:'south'}, 
{region: 'east',html:'east'}, 
{region: ‘west',html:'west'}, 
{region: 'center',html:'center'} 
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这 段 代码 的 显示 效果 如 图 8-9 所 示 。 north 

对 BorderLayout 来 说 ， 5 个 部 分 是 预先 就 设置 westicenter cast 
好 的 ， 根 据 上 北 、 下 南 、 左 西 、 右 东 的 方式 进行 
布局 。 其 中 north 和 south 分 别 位 于 页 面 的 最 上 方 和 
最 下 方 ， 可 以 分 别 用 来 做 系统 的 标题 和 状态 栏 ; 
west 和 east 分 别 位 于 页 面 的 左边 和 右边 , 是 为 菜单 
工具 条 准备 的 ; center 的 大 小 是 在 其 他 4 个 部 分 设 
置 好 以 后 自动 计算 出 来 的 ， 它 也 是 唯一 不 能 省 略 
的 部 分 。 

再 重复 一 遍 ，center 是 绝对 不 能 省 略 的 。 如 
果 items 中 缺少 了 region:'center' 就 会 报错 ， 
会 造成 程序 中 断 ， 页 面 上 就 什么 也 看 不 到 了 。 图 8-9 ”使 用 了 BorderLayout 的 布局 

了 解 了 BorderLayout 的 基本 用 法 以 后 ， 我 们 可 以 开始 进一步 挖掘 它 更 深层 次 的 功能 。 你 会 了 
解 到 BorderLayout 并 不 是 只 有 空空 的 5 个 分 区 ， 利 用 它 的 附加 功能 我 们 可 以 打造 出 更 完美 的 布局 。 


8.3.1 设置 子 区 域 的 大 小 


这 里 所 谓 的 子 区 域 就 是 设置 north、south、west、east 4 个 区 域 ， 不 包括 中 间 的 center， 因 为 中 
间 这 部 分 的 大 小 是 通过 其 他 部 分 计算 得 来 的 。 
从 图 8-9 中 也 可 以 看 出 ，north 和 south 部 分 只 
能 设置 高 度 (height)，west 和 east 部 分 只 能 设置 宽 Per 
度 《width)。 虽 然 在 使 用 HTML 时 它 会 自动 计算 
适合 本 身 的 尺寸 大 小 并 进行 显示 ， 但 在 这 里 我 们 
还 是 说 说 如 何 通 过 指定 它们 的 宽度 和 高 度 来 控 
制 显示 效果 。 WEST center East | 
如 果 为 图 8-9 中 的 示例 指定 宽度 和 高 度 , 结果 
会 如 图 8-10 所 示 。 


south 


从 图 8-10 中 可 以 看 出 ，north 和 west 区 域 变 大 
了 ，center 区 域 却 变 小 了 。 实 际 上 我 们 也 稍稍 增 
大 了 east 和 west 部 分 , 只 是 改变 的 幅度 太 小 , 不 容 south 
易 发 现 轴 了 。 现在 我 们 来 看 看 到 底 如 何 控制 各 个 . 
区 域 的 大 小 ， 如 代码 清单 8-3( 见 03-01-01.html) 图 8-10 设置 子 区 域 的 宽度 和 高 度 
所 示 。 
代码 清单 8-3 ”指定 各 子 区 域 的 大 小 

Var Viewport = new Ext .Viewport!(t{ 

liayout: ‘border', 


items: I 
{region: 'north',htm]l: ‘north',height:120}, 


Download at Pin5i.Com 


http://52pdf.taobao.com 


8.3 ”常用 的 边框 布局 一 一 BorderLayout 211 


{region: 'south' ,html:'south' ,height:30}, 
{region: 'east',html:'east' width:40)， 
{region: ‘west',html:'west',width:100}, 
{region: 'center',html:'center'] 
] 
了 


从 上 述 代 码 中 可 以 看 出 , 我 们 只 添加 了 width 和 height 参 数 ， 就 可 以 指定 每 个 子 区 域 的 大 小 
了 。 但 是 ， 正 如 前 面 所 讲 过 的 ，north 和 south 两 个 区 域 只 能 指定 高 度 值 ， 宽 度 值 由 BorderLayonut 
自动 计算 | east 和 west 只 能 指定 宽度 值 ， 高 度 值 由 BorderLayout 自 动 计算 ; center 区 域 的 大 小 是 由 
其 他 4 个 部 分 决定 的 ， 所 以 不 能 为 它 指定 宽度 值 或 高 度 值 。 

另外 ， 我 们 再 来 看 一 下 autoHeight :Erue 在 布局 方面 的 缺点 。 原 本 在 BorderLayout 中 的 子 组 
件 都 是 自动 延展 的 ，north 和 south 部 分 即使 设置 了 宽度 也 不 会 起 作用 。 同 理 ， 即 使 为 west 或 east 设 
径 了 高 度 也 不 会 影响 布局 的 结果 。 但 是 autcHeight :true 的 结果 却 是 破坏 性 的 ， 如 果 设 置 了 一 
个 或 多 个 autoHeight :true， 就 足以 毁灭 整个 布局 的 成 果 。 例 如 ， 我 们 给 所 有 的 子 组 件 都 加 上 
autoHeight :true， 代 码 如 下 所 示 : 


Var Viewport = new Ext .Viewport{t 
layout: ‘border', 
items: [ 
{region: 'north',html:'north',height:120,autoHeight:true}, 
{region: 'south' ,html: 'south' ,height:30,autoHeight :true}, 
{region: 'east',html:'east',width:40,autoHeight :true}, 
{region: 'west',html:'west' ,width:100,autoHeight :true)}, 
{region: 'center',html:'center',autoHeight :true} 
] 
}); 


结果 如 图 8-11 所 示 。 


icenter east 


south 2 
8-11 BorderLayout 使 用 autoHeight :上 rue 


该 示例 在 03-01-02.html 中 。 
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8.3.2 使 用 split 并 限制 它 的 范围 


使 用 了 split 就 允许 用 户 自行 拖 放 以 改变 某 一 个 区 域 的 大 小 。 如 图 8-12 所 示 , 允许 用 户 修改 west 
区 域 的 宽度 。 

从 图 8-12 中 可 以 看 出 , west 和 center 区 域 相交 的 边界 分 割 线 变 宽 了 .。 现在 我 们 可 以 把 鼠标 移动 
到 这 条 边界 上 ， 通 过 拖 放 改变 west 区 域 的 宽度 。 当 然 ，center 区 域 的 宽度 也 会 随 之 改变 。 拖 放 后 
的 效果 如 图 8-13 所 示 。 


| 
Oo wo | 
West center : west center 
| 


图 8-12 使 用 split:true 图 8-13 ” 减 小 west 区 域 的 宽度 
接 下 来 看 看 下 面 的 代码 〈 见 03-02-01.html)， 只 是 为 west 区 域 添加 了 split :true 参 数 。 


Var Viewport = new Ex.Viewport({ 
layout: 'porder ' ， 
itrems: [ 
{region: ‘north',html:"'north'}, 
{region: ‘west',html:'west',width:100,split:true}, 
{region: 'center',html:'center')} 
] 
Fs 


需要 注意 的 是 ,即使 加 上 了 split:true 参 数 ， north 
north 和 south 区 域 也 只 能 上 、 下 拖 放 ，west 和 east 区 ”west tex 
域 只 能 左 、 右 拖 放 。center 区 域 则 不 会 变化 ， 即 使 
给 center 加 上 split:true 也 不 会 出 现任 何 拖 放 边 
界 。 图 8-14 就 是 为 north 部 分 加 上 了 split:true 参 
数 后 的 效果 ， 示 例 在 03-02-02.html 中 。 
再 次 提醒 大 家 : 有 时 用 户 输入 的 数据 是 不 可 信 
的 ,无 法 预知 用 户 的 操作 会 导致 哪些 问题 ,所 以 必 
须 限 制 用 户 的 操作 。 我 们 为 用 户 提供 了 拖 放 功能 ， 
就 要 限制 可 以 拖 放 的 范围 , 否则 用 户 在 拖 放 过 程 中 
很 可 能 会 导致 布局 变 得 很 乱 。 在 出 现 问题 时 ,用 户 图 8-14 ”为 north 部 分 设置 split :true 


一 一 一 一 一 一 一 -一 一 一- 
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也 许 还 会 认为 是 程序 代码 在 某 些 方面 不 够 严谨 造成 的 。 

我 们 首先 要 限制 左 侧 菜单 区 域 (west) 的 大 小 ， 不 允许 它 太 窗 ， 以 至 于 无 法 完整 显示 菜单 的 
内 容 ; 也 不 允许 它 太 宽 ， 以 至 于 整个 布局 变形 。 这 时 ， 我 们 就 需要 使 用 参数 minSsize 和 maxSize。 
将 这 两 个 参数 与 split:true 结 合 使 用 ， 就 可 以 限制 用 户 拖 放 的 范围 了 ， 如 下 面 的 代码 
(03-02-03.html) 所 示 。 


Var viewport = new Ext .Viewpozrt (({ 
layout: 'border', 
items: [ 
{region: 'north',html: ‘north'}, 
{region: 'west',html: 'west',width:100, 
split:true,minSize:80,maxSize;:120}, 
{region: 'center’',html: 'center'’)} 
] 
Es 


上 面 的 代码 指定 了 west 的 初始 宽度 为 100， 然 后 让 west 的 宽度 只 可 以 在 80 和 120 之 间 变 化 ， 不 
能 超出 这 个 范围 ， 以 此 控制 用 户 的 操作 。 

在 north 里 也 可 以 是 使 用 minsize 和 maxsize， 只 不 过 这 里 控制 的 是 最 小 高 度 和 最 大 高 度 ， 参 
数 的 配置 方法 相似 ， 我 们 这 里 就 不 详细 介绍 了 。 如 果 有 问题 ， 可 以 参考 03-02-04.html 中 的 示例 。 


8.3.3” 子 区 域 的 展开 和 折 垂 


该 功能 可 以 让 一 个 区 域 展开 和 折合 (相当 于 隐藏 )， 效 果 如 图 8-15 所 示 。 
单 击 west 区 域 的 折 营 按钮 结果 如 图 8-16 所 示 。 





7 pt north 
west "<«kcenter »i center 1 
West | 
| 
| 
| 

图 8-15 ”展开 后 的 west 区 域 图 8-16 折合 后 的 west 区 域 


要 实现 这 个 效果 ， 只 需要 配置 几 个 参数 即 可 ， 如 下 面 的 代码 ( 见 03-03-01.html〉 所 示 。 


Var Viewport = new Ext .Viewport!(t 
layout: 'border', 
ictems: [ 
{region: ‘north's htmls: 'north'}, 
{region: 'west',html: 'west',title: 'west', 
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width:100,collapsible:true}, 
{region:'center',html:'center') 


] 
用 


主要 的 配置 参数 是 collapsible:true， 这 个 参数 激活 了 west 区 域 的 折 秋 功能， 而 前 面 的 
title 参 数 也 是 必须 设置 的 , 因为 折 又 按钮 是 出 现在 标题 部 分 的 。 如 果 没 有 为 west 区 域 设置 标题 ， 
折叠 按钮 也 就 无 法 显示 了 ， 所 以 一 定 要 加 .上 title 参 数 。 

为 north 区 域 设 置 折 有 营 功 能 的 配置 方式 与 west 完 全 相同 , 只 是 north 会 向 上 折 赫 。 你 甚至 还 可 以 
为 center 区 域 设 置 折 和 到 功能， 不 过 center 部 分 即使 折 卷 了， 也 不 会 影响 其 他 部 分 的 大 小 ， 如 图 8-17 
( 见 03-03-02,.html》 所 示 。 

如 果 将 每 个 区 域 都 折 八 起 来 ， 效 果 如 图 8-18 所 示 。 

要 实现 这 种 效果 ， 代 码 中 的 参数 设置 与 前 面 所 讲 的 完全 相同 。 要 记 住 ， 当 设置 
collapsible:true 时 ， 必 须 保证 tit1le 参 数 也 设置 好 ， 这 样 就 能 正常 显示 所 有 折 秋 按钮 了 。 

到 这 里 ， 我 们 已 经 可 以 完全 实现 BorderLayout 中 每 个 部 分 的 折 秋 和 展开 功能 。 不 过 ， 如 果 折 
登 后 的 区 域 什 么 都 不 显示 ， 那 么 就 不 便 查看 该 区 域 里 的 内 容 了 。 如 果 可 以 在 折 释 的 列 上 添加 提示 
信息 ， 那 么 查看 该 区 域 里 的 内 容 就 比较 方便 了 。 


north 
north i 
west eeter ~ 

图 8-17 将 多 个 区 域 设置 为 可 折叠 的 图 8-18 ”所 有 区 域 被 折 和 后 的 效果 


下 面 我 们 来 看 看 折 和 过 后 显示 提示 信息 的 方法 。 因 为 HTML 中 是 不 支持 文字 竖 排 的 ， 所 以 west 
和 east 这 样 的 细 长 形状 的 区 域 就 无 法 用 设置 文本 的 方式 设置 提示 信息 。EXT 中 也 没有 为 折 肥 后 的 
提示 信息 设置 默认 的 实现 方式 。 因此， 我 们 这 里 的 方法 就 是 修改 各 区 域 折 辣 后 的 CSS 样 式 ， 通 过 
设置 背景 图 片 的 方式 来 实现 添加 提示 信息 的 目的 。 

为 此 ， 我 们 先 为 各 区 域 设 置 对 应 的 CSS 样 式 ， 如 代码 清单 8-4 所 示 。 


代码 清单 8-4 设置 各 区 域 的 提示 信息 的 CSS 样 式 


-xXx-layout~collapsed-north 1 
background-image: url{luser_maie.png); 
background-repeat: no-repeat:; 
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background-position: center,; 

} 

.Xx-layout-collapsed-south { 
background-image: url (user_female.png); 
background-repeat: no-repeat; 
background-position: center; 

} 

,Xx-layout-collapsed-west 1{ 
background-image: Url (user_male.pngl) ; 
background~repeat: no-repeat; 
backgroundG-position: center; 

} 

.XxX-layout-collapsed-east { 
background-image: Url(user_female.png) : 
background-repeat: Do-Iepeat : 
background-position: center; 

} 


这 里 的 CSS 样 式 类 名 是 默认 的 , 与 各 区 域 的 _ _ _ Os 
名 称 一 一 对 应 。 样 式 中 我 们 设置 了 3 个 属性 : 了 z 
background-image 表 示 背 景 图 片 的 路 径 ， 2 peenter > 
background-repeat 表 示 背 景 图 片 只 会 显示 一 center 
次 ，background-position 表 示 背 景 图 片 会 居 
中 显示 。 因 此 ， 如 果 想 显示 文本 内 容 ， 可 以 制作 A 
文字 图 片 。 名 

将 这 些 CSS 样 式 添加 到 页 面 中 ， 不 需要 对 
JavaScript 代 码 部 分 进行 修改 ， 就 可 以 得 到 图 
8-19 的 折 登 效果 。 

当然 ， 图 8-19 中 显示 的 提示 信息 图 片 过 于 
简单 。 实 际 中 应 用 中 ， 大 家 还 要 考虑 图 片 的 具 ee 
体高 度 和 宽度 ， 因 为 图 片 不 会 根据 布局 调整 自 图 8-19 添加 了 提示 信息 图 片 后 的 折合 效果 
己 的 大 小 。 示 例 代码 如 下 所 示 : 


Var Viewport = new Ext .Viewport {1{ 

layout: ‘border', 

items: [ ‘ 
{region: 'north’',htmil: north',title: 'north' ,height:80,collapsible:true), 
{region:'south',html:'south',title:'south',height:80,collapsible:true}, 
{region: 'west',html:'west',title: ‘west',width:;100,collapsible:true}, 
{region: 'east',html:'east',title:'east',width:100,collapsible:true}, 
{region: 'center' ,html:'center',title: 'centrer')} 





] 
}); 


人 至此，BorderLayout 的 主要 功能 都 已 经 讲 完 了 。 只 要 掌握 了 上 面 的 内 容 ， 大 家 就 可 以 实现 丰 
富 而 灵活 的 布局 样式 了 。 下 面 我 们 将 讲述 另外 几 种 布局 方式 ， 它 们 都 可 以 与 BorderLayout 结 合 使 
用 ， 从 而 实现 功能 更 为 复杂 的 布局 样式 。 
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8.4 ”制作 伸缩 菜单 的 布局 一 一 Accordion 


用 过 QQ 的 朋友 应 该 会 对 它 里 面 的 伸缩 菜单 有 深刻 的 印象 。 展开 折 元 分 组 ， 再 配 上 动画 效果 ， 
我 相信 很 多 人 都 想 实现 这 样 的 画面 和 效果 。 

Accordion 是 EXT 中 默认 布局 的 一 部 分 ,如 果 想 用 它 , 直接 将 区 域 加 上 1ayout:'accoraqaion， 
即 可 ， 其 他 部 分 基本 无 需 改动 。 

我 们 先 来 看 看 图 8-20 中 的 示例 。 





一 村 


策 
第 一 


| 这 


图 8-20 ”使用 了 Accordion 的 示例 


我 们 利用 ViewPort 制 作出 只 有 west 和 center 两 个 区 域 的 BorderLayout， 在 west 部 分 放 上 
Accordion， 实 现 方法 如 代码 清单 8-5 所 示 。 


代码 清单 8-5 ”Accordion 示 例 


Var viewport = new Ext.Viewport({ 
layout: 'border', 
items: [1{ 
region: '‘'west', 
width: 200, 
layout: 'accordion', 
layoutContfig: { 
titleColilapse: true, 
animate: true, 
activeOnTop: false 
| 
items: [{ 


title: ' 第 一 栏 '， 

html: ' 第 一 栏 ' 
FE 

title: "第 二 栏 ，， 

html: ' 第 二 栏 ' 
et 

title: ' 第 三 栏 '， 
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html: ' 第 三 栏 ' 
} 
region: ‘'center', 
split: true, 
border: true 
1] 

让 

设置 了 layout:'accordion' 后 ， 再 使 用 items 添 加 3 个 元 素 ， 记 得 每 个 子 元 素 里 都 要 加 上 
title 参 数 ，Accordion 没 有 提供 默认 的 标题 ， 不 设置 标题 是 一 定 会 出 错 的 。 

与 布局 有 关 的 配置 参数 都 写 到 1ayoutConfig 里 了 ， 这 也 是 在 Ext .conainer 中 定义 好 的 。 
与 布局 有 关 的 所 有 配置 项 都 写 在 layoutconfig 中 了 ， 随 后 在 进行 布局 时 会 自动 赋 给 对 应 的 
layout 实 例 ， 并 产生 作用 。 这 些 配 置 项 如 下 所 示 。 

口 titieCollapse: 默认 为 true， 单 击 标题 就 可 以 折 有 鸽子 面板 ， 如 果 设 置 为 flse， 就 只 能 

通过 单 击 标题 右边 的 图 标 折 车子 面板 。 

D animate: 展开 和 折 登 时 是 否 使 用 动画 效果 。 

D_ activeonTop: 默认 值 是 false， 执 行 展开 和 折 受 操作 后 ， 子 面板 的 顺序 不 会 改变 。 如 果 

设置 为 Lrue， 就 会 随 着 展开 和 折合 的 顺序 而 改变 ， 展 开 的 子 面板 总 是 放 在 最 上 面 。 

该 示例 在 04.html 中 。 


8.5 ”实现 操作 向 导 的 布局 一 一 CardLayout 


CardLayout 可 以 看 作 是 一 胎 卡 片 , 从 上 面 看 起 来 就 像 是 一 张 卡片 , 可 以 把 中 间 的 卡片 抽出 来 ， 
放 到 最 上 面 ， 但 每 次 只 能 看 到 一 张 卡片 。 

这 种 布局 特性 用 来 制作 操作 向 导 最 为 合适 ， 图 8-21 就 是 一 个 有 3 个 步骤 的 操作 向 导 。 

单 击 “ 下 一 步 "， 结 果 如 图 8-22 所 示 。 

再 单 击 “下 一 步 ”， 操 作 向 导 就 结束 了 ， 如 图 8-23 所 示 。 

就 像 我 们 所 见 到 的 那样 ， 虽 然 给 CardLayout 配 置 了 几 个 子 面板 ， 但 它 每 次 只 显示 其 中 一 个 ， 看 
上 去 有 点 儿 像 幻灯 片 。 布 局 倒是 很 简单 ， 只 要 改 成 1ayout : 'cara' 就 可 以 了 ， 如 代码 清单 8-6 








所 示 。 
某 茶 向 导 ey 基 茶 沿 时 :让 Pr 
哈哈 + 第 二 步 ， 一 共 三 步 些 喜 杖 喜 ,完成 了 。 
欢迎 用 昨 的 向 导 。 第 三 步 ， 一 共 三 步 ， 最 后 一 步 
第 一 步 ， 一 共 三 步 了 
下 一 步 上 一 步 [| 上 一 步 :| 
图 8-21 ”CardLayout 第 一 步 图 8-22 CardLayout 第 二 步 图 8-23 ”CardLayout 第 三 步 
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代码 清单 8-6 CardLayout 


Var viewport = new Ext.Viewport!t{ 
layout: 'border', 
items:[t{ 
region: 'west '， 
id: 'wizard'， 
width: 200, 
title: ' 某 某 向 导 ' ， 
layout:'card', 
activeItem: 0, 
bodyStyle: '‘'padding:15px', 
Gefaults: ({ 
border: false 


bbar: {{ 
id: ‘move-prev', 
texwts + EB:., 
handler: navHandler.createDelegate(this, [-1]), 
disabled: true 
bn "= wt 
id: ‘move-next', 
text: ' 下 一 步 '， 
handler: navHandler.createDeliegate(this, [1)) 
})] ， 
items: [({ 
id: 'card-0', 
html : '<h1> 了 哈哈 ! <br /> 欢迎 用 咱 的 向 导 。</h1l1><p> 第 一 步 ， 一 共 三 步 </p>' 
Fit 
id: '‘'card-1', 
html: '<p> 第 二 步 ， 一 共 三 步 </p>' 
}.,{ 
ids card=2'. 
htmli : '<hl> 恭 专 恭 喜 ， 完 成 了 。 </hl><p> 第 三 步 ， 一 共 三 步 ， 最 后 一 步 了 。 </p>' 
}] 


region: 'center', 
Split: true, 
border: true 
村 
FE 


当前 显示 的 子 面板 是 用 activeItem 来 控制 的 ， 在 activeItem 初 始 值 为 0 时 ， 是 告诉 
CardLayout， 要 显示 items 中 索引 为 0 的 子 面板 ， 也 就 是 ia:'card-0' 的 部 分 。 

bbar 里 设置 的 是 两 个 按钮 ， 控 制 上 下 翻 页 的 代码 (handler〉 稍微 有 些 复杂 。 首 先 判断 需要 
显示 哪 一 个 子 面板 , 得 到 索引 值 后 就 调用 CardLayout 的 setActiveItem() 函数 把 这 个 子 面板 显示 
出 来 。 剩 下 的 问题 就 是 如 何 根据 当前 页 面 的 索引 位 置 改变 前 进 和 后 退 按钮 的 状态 , 代码 如 下 所 示 : 


var navHandler = function(direction)t 


Var wizard = Ext.getCmp!('wizard'} .layout; 
Var prev = Ext .getCcmp{('move-prev'); 
var next Ext .getCcmpl{l'move-next'); 
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var activeld = wizard.activeItem, id; 


if {activeId == 'card-0') { 

if (direction == 1) 1 
wizard.setActiveItem{(1); 
prev.setDisabledl{(false); 

} 

} else if (activelId == 'card-1') { 
if (Qirection == -1) { 
wizard.setActiveItem{0); 
prev.setDisabled (true); 

} else { 
wizard.setActiveItem(2); 
next .setDisabled(true); 

} 

} else if (activelId == 'card-2') { 
if (direction == -1) { 
wizard.setActiveItem{1); 
next .setDisabled(false); 


} 
}; 


该 示例 在 05.html 中 。 


8.6 控制 位 置 和 大 小 的 布局 一 一 AnchorLayout 和 AbsoluteLayout 


AnchorLayout 提 供 了 一 种 灵活 的 布局 方式 ， 既 可 以 为 items 中 的 每 个 组 件 指 定 与 总 体 布 局 大 
小 的 差 值 ， 也 可 以 设置 一 个 比例 使 子 组 件 可 以 根据 整体 自行 计算 本 身 的 大 小 。 它 为 我 们 提供 了 3 
种 配置 方式 。 

第 一 种 方式 是 使 用 百分比 进行 配置 ,我们 可 以 设置 某 一 个 子 组 件 占 整体 长 和 宽 的 百分比 。 例 
如 ， 这 里 我 们 设置 panel 1 的 宽度 占 整体 宽度 的 90%， 高 度 也 占 整 体高 度 的 90%; 设置 panel 2 的 宽 
度 占 整体 宽度 的 80%， 显 示 效 果 如 图 8-24 所 示 。 





Danel 2 


图 8-24 ”在 AnchorLayout 中 使 用 百分比 的 方式 设置 子 组 件 的 大 小 
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图 8-24 的 实现 方法 如 代码 清单 8-7( 见 06-01.html〉 所 示 。 
代码 清单 8-7 ”在 AnchorLayout 中 使 用 百分比 的 方式 设置 子 组 件 的 大 小 


Var viewport = new Ext.Viewport!({ 
layout: 'anchor', 
items: [{ 
Cirle Danel Tr, 
html: 'panel 1°, 
anchor: 'S50% 50%， 


title: ‘panel 2°', 
html: ‘panel 2°', 
anchor: '80%' 

}] 

}); 

从 代码 中 可 以 看 出 ， 我 们 为 panel 1 设置 了 一 个 anchor 参 数 ， 参 数值 是 一 个 字符 申 ， 包 含 了 
两 个 用 空格 分 隔 的 百分数 。 这 两 个 百分数 分 别 代表 了 所 占 的 宽度 和 高 度 。Panel 2 与 之 类 似 ， 只 是 
anchor 参 数 中 只 有 一 个 百分数 〈80%)。 这 样 配 置 的 结果 是 ， 宽 度 设置 为 整体 的 80%， 而 高 度 自 
动 设 置 为 auto。 

第 二 种 方式 是 直接 设置 与 右 侧 和 底部 的 边 距 ， 效 果 如 图 8-25 所 示 。 

二 3 Sy SUR 
Panel 1 


图 8-25 ”设置 与 右 侧 和 底 端的 边 距 


我 们 指定 panel 1 与 右 侧 相距 50 像 素 ， 与 底部 相距 200 像 素 ，panel 2 与 右 侧 相距 100 像 素 ， 如 代 
码 清单 8-8〈 见 06-02.html) 所 示 。 


代码 清单 8-8 ”在 AnchorLayout 中 使 用 设置 边 距 的 方式 设置 子 组 件 的 大 小 


Var Viewport = new Ext.Viewportl(! 
1ayout :' anchor ' ， 
items:[t 
title: ‘panel 1', 
html: 'panel 1°', 
anchor: ‘~50 -200， 
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bat 
Le panel 2 
html: ‘panel 2', 
anchor: '-100"' 
| 
| 


因为 边 距 以 像素 为 单位 ， 所 以 anchor 中 不 需要 使 用 百分数 。panel 1 里 依然 有 由 空格 分 开 的 
两 个 整数 ， 表 示 与 右 侧 和 底部 的 相对 距离 ， 在 anchor 中 使 用 负数 表示 子 组 件 的 实际 大 小 要 在 整 
体 的 大 小 上 减 去 对 应 的 anchor 值 来 得 到 。panel 2 中 只 设置 一 个 值 ， 只 会 计算 相对 右 侧 的 距离 ， 
高 度 自 动 赋予 auto。 

第 三 种 方式 称 为 side。 使 用 它 的 前 提 是 ， 为 作为 布局 整体 的 父 组 件 和 布局 内 部 的 子 组 件 都 设 
置 好 width、height 和 anchorSsize 属 性 。AnchorLayout 会 记录 布局 整体 与 子 组 件 在 大 小 上 的 差 
值 ， 为 以 后 调整 布局 提供 依据 。 

我 们 先 来 看 看 代码 清单 8-9〔 见 06-03.html)， 如 下 所 示 。 


代码 清单 8-9 ”在 AnchorLayout 中 使 用 side 方 式 设置 子 组 件 的 大 小 


Var viewport = new Ext .Viewport ({ 

layout: 'anchor', 
anchorSize:; {width:400,height:300}, 
items:[t{ 

title: ‘panel 1', 

html: 'panel 1°', 

width: 200, 

height: 100, 

anchor: !T b' 





title: ‘panel 2', 
html: 'panel 2°', 
width: 100, 
height: 200, 
anchor: '‘'r b' 
| 
站 


我 们 为 Viewport 设 置 了 anchorsize， 这 是 一 个 包含 宽度 和 高 度 信息 的 JSON 对 象 ， 以 此 作 
为 以 后 计算 差 值 的 基准 。 然 后 ， 分 别 在 panel 1 和 panel 2 中 设置 宽度 和 高 度 的 信息 。anchor 的 设置 
只 有 anchor:'r b' 一 种 ， 这 是 固定 写法 ， 也 可 以 写成 anchor:'right buttom'， 两 种 写法 的 效 
果 是 完全 相同 的 。 设 置 anchor:'r b' 前 的 效果 如 图 8-26 所 示 ， 设 置 anchor:'z b' 后 的 效果 如 图 
8-27 所 示 。 

设置 了 side 之 后 的 计算 方式 是 这 样 的 ，AnchorLayout 首 先 获得 父 组 件 的 宽度 、 高 度 ， 以 及 每 
个 子 组 件 的 宽度 、 高 度 ， 然 后 将 子 组 件 与 父 组 件 的 宽度 、 高 度 之 差分 别 保存 起 来 。 在 父 组 件 的 大 
小 改变 之 后 ，AnchorLayout 会 使 用 之 前 保存 的 差 值 ， 根 据 改变 后 父 组 件 的 大 小 ， 计 算出 子 组 件 当 
前 的 宽度 和 高 度 。 这 种 配置 方法 比较 愚笨 ， 实 际 使 用 时 很 少 用 到 。 

实际 上 ， 前 两 种 配置 方式 已 经 很 灵活 了 ， 我 们 还 可 以 在 anchor 中 同时 使 用 百分比 和 边 距 的 
配置 方式 ， 如 代码 清单 8-10 所 示 。 
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ponel 1 ey 
panel 1 
panel 2 
panel 
图 8-26 ”在 AnchorLayout 中 使 用 side 方 式 图 8-27 在 AnchorLayout 中 使 用 side 方 式 设置 子 
设置 子 组 件 的 大 小 (1) 组 件 的 大 小 (2) 


代码 清单 8-10 ”AnchorLayout 组 合 配置 形式 


Var viewport = new Ext .Viewport!(t 
layout: 'anchor ' ， 
items:[t 
title: ‘panel 1°', 
html: '‘'panel 1°', 
anchor: '-100 40%' 


title: 'panel 2'， 
html: 'panel 2°', 
anchor: '-200 60%’ 
}] 
}): 


结果 如 图 8-28 所 示 。 
这 样 ， 我 们 更 容易 对 宽度 不 变 、 高 度 需要 自由 改变 的 布局 进行 精确 的 控制 。 
ae Ny 
panel 1 
pe 
panel 2 


图 8-28 ”同时 使 用 百分比 和 边 距 两 种 配置 方式 
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了 解 了 AnchorLayout 的 应 用 后 ， 我 们 就 可 以 看 看 AbsoluteLayout 的 用 法 。AbsoluteLayout 是 
AnchorLayout 的 一 个 子 类 ， 继 承 了 AnchorLayout 的 所 有 特性 ， 而 且 还 有 很 多 其 他 功能 。 

从 上 面 的 示例 中 我 们 可 以 看 出 ，AnchorLayout 布 局 下 的 子 组 件 都 是 自 上 而 下 竖 直 排列 的 ,我 
们 不 能 控制 每 个 组 件 的 位 置 。AbsoluteLayout 正 是 为 解决 这 个 问题 而 来 的 ， 我 们 可 以 通过 设置 x、 
y 参 数 达 到 控制 子 组 件 位 置 的 效果 ， 如 图 8-29 所 示 。 


me 
panel 1 


penel 2 
panel 2 


图 8-29 ”使 用 AbsoluteLayout 实 现 绝对 定位 


通过 上 面 的 讨论 ， 我 们 已 经 可 以 通过 AbsolutLayout 为 组 件 进行 绝对 定位 ， 并 使 用 
AnchorLayout 确 定 各 个 组 件 的 相对 大 小 。 代 码 如 下 所 示 : 


Var Vviewport = new Ext .Viewport({ 
layout: 'absolute!’, 
items:[{ 
citle: ‘panel 1'， 
html: ‘panel 1', 
汪汪 
Y3 0， 
anchor: '-200 40$， 





title: ‘panel 2 '， 
html: 'Panel 2', 
X3 200, 
Yi UU. 
anchor: '-50 60%' 
}] 
中 


该 示例 在 08.layout06-05.html 中 。 


8.7 表单 专用 的 布局 FormLayout 


FormLayout 也 是 AnchorLayout 的 一 个 子 类 ， 可 以 在 它 里 面 使 用 anchor 设 置 宽 和 高 的 比例 。 
但 是 ， 它 主要 还 是 用 于 对 表单 进行 布局 。 首 先 要 明白 的 一 点 是 ，Ext . form.FormPanel 使 用 它 作 
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为 默认 的 布局 方式 。 也 正 因为 使 用 了 FormLayout 布 局 ， 我 们 设置 的 fieldLabel、boxLabel 才 能 显示 
出 来 ， 而 FormLayout 里 也 提供 了 一 系列 的 参数 来 控制 这 些 显示 效果 。 

本 章 主 要 讲解 与 布局 有 关 的 知识 ， 因 此 我 们 来 看 看 与 表单 有 关 的 配置 参数 ， 然 后 实现 一 个 使 
用 anchor 控 制 多 个 Ext .form.Fielda 的 实例 。 

FormLayout 提 供 的 用 于 控制 表单 显示 的 参数 如 表 8-1 所 示 。 


表 8-1 FormLayout 提 供 的 用 于 控制 表单 显示 的 参数 


参 数 名 描 述 
hideLabels 是 于 隐藏 控 件 的 标签 

itemC1s 表单 显示 的 样式 

iabelalign 标签 的 对 齐 方式 〈 左 、 中 、 右 ) 
labelPad 标签 空白 的 像素 值 
labelwidch 标签 宽度 


FormLayout 为 Ext . form.Field 提 供 的 配置 参数 如 表 8-2 所 示 。 


表 8-2 ”Ext .form.PField 对 应 的 参数 
Cp i 





参数 名 描 述 
clearCcls 清除 DIV 演 染 的 CSS 样式 
fielduabel 对 应 控件 的 标签 内 容 
hideLabel 是 否 隐 藏 标签 
itemCls 控件 的 CSS 样式 
labelSeparator 标签 和 控件 之 间 的 分 隔 ， 默 认 是 “:” 
labelStyle 标签 的 CSS 样式 
以 上 这 些 是 FormLayout 与 Ext . form. 
BasicForm 和 Ext .form.Field 对 应 的 配置 仿生 
参数 ， 详 细 内 容 请 参考 第 4 章 。 名 称 ; 
下 面 我 们 来 演示 一 下 如 何 使 用 anchor 生日 ; 司 
对 表单 内 的 多 个 field 进 行 布局 ， 效 果 如 图 六 


8-30 所 示 。 
实现 的 效果 是 ， 每 个 field 的 宽度 占 整 体 
宽度 的 90%， 而 且 宽 度 可 以 根据 页 面 大 小 的 
变化 自动 调整 “备注 ”对 应 的 kextarea 的 
高 度 也 是 可 以 自动 延展 的 。 这 样 使 用 anchor 
设置 大 小 ， 不 仅 避 免 了 考虑 每 个 组 件 的 宽度 
和 高 度 (这样 很 麻烦 ), 还 可 以 实现 自动 调整 
大小 ， 何 乐 而 不 为 呢 ? 实现 过 程 如 代码 清单 。 图 8-30 利用 Formlayout 对 表单 内 的 多 个 ficld 进 行 布局 
8-11 所 示 〈 见 07.html )。 


Download at Pin5i.Com 


http://52pdf.taobao.com 


8.8 ”分 列 式 的 布局 ColumnLayout 225 


代码 清单 8-11 利用 Formlayout 对 表单 内 的 多 个 field 进 行 布局 


var viewport = new Ext.Viewport!(t 
layout: 'fit', 


items:[t 
xtype: '‘'form * 
titile: :信息 ， 


lapelAlign: :right '， 
labelWiqdth: 50， 
frame: true, 
defaultType: 'textfield'’, 
items: [1 
fieldLabel: ' 名 称 '， 
name: 'name', 
anchor: '90%' 


fieldLabel: ' 生 日 '， 
name: ‘birthday', 
xtype: 'datefield', 
anchor: '90%" 


fieldLabel: ' 备 注 '， 
name: 'desc', 
XEVDe: textarea, 
anchor: ‘'90% -100'! 
}] 
}] 
Rs 


之 前 的 示例 大 多 数 是 使 用 width 和 height 手 工控 制 field 的 大 小 , 希望 大 家 能 尝试 使 用 布局 的 
方式 对 表单 进行 控制 。 
8.8 分 列 式 的 布局 ColumnLayout 


在 第 4 章 中 我 们 已 经 了 解 了 使 用 ColumnLayout 进 行 分 列 布局 的 相关 知识 。 在 此 将 进一步 学 习 
它 ， 这 次 的 重点 不 是 表单 的 排列 ， 而 是 对 ColumnLayout 的 基本 用 法 的 研究 。 
先 看 一 个 简单 的 分 列 布局 示例 ， 如 图 8-31 所 示 。 


Column 1 Eolummn 2 Cohuannn 3 





图 8-31 使 用 了 ColumnLayout 的 简单 分 列 布局 
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实现 过 程 如 代码 清单 8-12〈 见 08-01.html) 所 示 。 
代码 清单 8-12 ”使 用 ColumnLayout 实 现 简单 分 列 布局 


Var Viewport = new Ext.Viewport({ 4 
layout: 'column', 
items: {{ 

titie: ‘Column 1°', 
colummWidth: .25 


title: ‘Column 2°', 
columnwidth: .4 


titie: (Column 3°, 
columnWidth: ,35 


请 注意 items 中 每 个 子 组 件 的 columnwidth 参 数 ， 它 是 0 到 1 之 间 的 一 个 小 数 ， 表 示 每 个 子 组 
件 在 整体 中 所 占 的 百分比 。 它 们 的 总 和 应 该 是 1， 否 则 页 面 会 出 现 没 有 填 满 的 情况 。 

如 果 把 columnwidth 的 值 写 错 了 ， 写 成 了 大 于 1 的 值 (有 些 人 开始 时 可 能 不 会 发 现 前 面 的 小 
数 点 ， 以 为 值 都 是 整数 )，ColumnLayout 也 不 会 报错 ， 但 是 在 布局 时 会 显得 混乱 。 所 以 ， 当 出 现 
类 似 问题 时 ， 请 先 检查 一 下 这 里 的 配置 是 否 正确 。 

刚才 的 示例 较 简单 ， 下 面 来 看 一 个 稍微 复杂 一 点 的 例子 。 

有 时 我 们 希望 保持 某 一 列 的 宽度 不 变 ， 当 调整 页 面 时 ， 只 让 其 他 列 发 生 改变 ， 这 样 来 保证 某 
一 列 中 的 布局 不 发 生 改变 。 在 ColumnLayout 中 可 以 单独 为 这 一 列 赋予 宽度 值 ， 其 他 的 列 再 使 用 
columnWidath 来 分 剩 下 的 宽度 ， 实 现 过 程 如 代码 清单 8-13 所 示 。 


代码 清单 8-13 ”使 用 col unwidatph 平 分 剩余 部 分 的 觉 度 


Var Viewport = new Ext.Viewport{t{ 
layout: ‘column’', 


items: [{ 
title: ‘Column 1', 
width: 120 


title; ‘Column 2°', 
columnWidth: .7 


title: ‘Column 3°', 
columnWiqdth: .3 


修改 后 ，Column1 的 宽度 定 为 120〔〈 像 素 )，Column2 和 Column3 划 分 剩 下 的 宽度 。Column2 
占 剩 下 宽度 的 70%，Column3 占 剩 下 宽度 的 30%。 以 后 无 论 页 面 如 何 改变 ，Column1l 的 宽度 都 不 会 
变 ，Column2 和 Column3 按 照 70% 和 30% 的 比例 进行 改变 。 

ColumnLayout 的 分 列 规则 其 实 很 简单 ,一共 分 成 两 步 : 第 一 步 , 遍历 所 有 items 中 的 子 组 件 ， 
跳 过 所 有 设置 了 width 值 或 没有 设置 width 值 而 是 默认 使 用 auto 的 部 分 ， 同 时 从 总 宽度 中 减 掉 这 
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些 部 分 占用 的 宽度 : 第 二 步 ， 使 用 columnwidth 属 性 的 值 计算 出 每 一 列 的 宽度 ，columnwiath 
属性 的 值 是 一 个 小 数 , 表示 每 一 列 占 总 宽度 的 百分比 ， ColumnLayout 以 此 来 确定 每 一 列 所 占 的 具 
体 宽度 。 完 成 这 两 步 操作 后 ， 最 终结 果 就 会 显示 到 页 面 中 。 
需要 特别 注意 的 是 ，columnwiath 的 总 和 应 该 等 于 1， 和 否则 无 法 实现 预期 的 结果 。 
该 示例 在 08.layout/08-02.html 中 。 


8.9 ”表格 状 的 布局 TableLayout 
先 看 一 下 表格 状 的 布局 的 示例 效果 图 ， 如 图 8-32 所 不 。 
Cell B content 
Cell A 


content _ = 
Cell C Cell D 


content content 





图 8-32 ”表格 布局 
实现 过 程 如 代码 清单 8-14( 见 09.html〉 所 示 。 
代码 清单 8-14 ”利用 TableLayout 进 行 表格 布局 


Var Viewport = new Ext .Viewporc ({ 
layout: 'fit', 
items:{[1 
title: 'Table Layout', 
layout:'table', 
defaults: { 
bodyStyle: 'padding:20pxXx' 
}， 
layoutConfig: { 
columns: 3 
}， 
items: [{ 
htmL: ‘<p>Cell A content</p>', 
rowspan: 2 


html: ‘<p>Cell B content</p>', 
colspan: 2 


html: '<p>Cell C content</p>' 
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html: '<p>Cell D content</p>" 
}] 
}] 
}}; 


其 中 ，layoutconfig 中 定义 了 一 共 要 分 几 列 ， 然 后 在 items 中 定义 了 各 个 子 面板 ， 便 用 
rowspan 利 colspan 设 置 了 如 何 进行 行 和 列 的 合并 。 它 遵循 从 左 到 右 、 从 上 到 下 的 顺序 。 
实际 上 ， 如 果 使 用 FireFox 的 Firebug 查 看 生成 的 代码 ， 可 以 看 到 生成 的 就 是 table、tr、ta 
等 标签 。TableLayout 为 我 们 提供 了 一 种 将 传统 表格 布局 方式 与 EXT 布 局 方式 相 结合 的 方法 。 
为 此 ，TableLayout 还 提供 了 一 系列 配置 参数 对 表 〈table) 相关 的 标签 进行 配置 ， 如 表 8-3 所 
不 。 
表 8-3 TableLayout 的 配置 参数 


参数 名 称 描 述 

Rowspan 合并 的 行 数 

Colspan 合并 的 列 数 

cellrd 某 个 单元 格 的 iG 
cellcls 某 个 单元 格 的 CSS 样式 


TableLayout 本 身 并 没有 什么 特殊 功能 ， 它 所 实现 的 效果 其 实 完全 可 以 用 BorderLayout 和 
ColumnLayout 等 布局 方式 代替 ， 而 且 这 些 布局 方式 更 灵活 。 不 过 有 些 人 更 喜欢 用 表格 布局 ， 认 为 
它 更 简单 和 方便 。 


8.10 与 布局 相关 的 其 他 知识 
下 面 将 介绍 一 些 与 布局 相关 的 知识 ， 这 将 有 助 于 我 们 更 好 地 理解 EXT 中 组 件 和 布局 的 应 用 。 


8.10.1 超 类 Ext .container 的 公共 配置 与 xtype 的 概念 


Ext .Container 是 所 有 可 布局 组 件 的 超 类 ， 只 要 是 继承 了 Ext .Container 的 子 类 就 可 以 对 
自身 进行 布局 。 上 面 的 示例 中 使 用 的 都 是 Ext .container 的 子 类 , 那么 这 个 超 类 到 底 为 我 们 提供 
了 什么 公共 配置 呢 ? 

最 常用 也 最 主要 的 就 是 参数 1ayout 和 items, 它们 分 别 用 来 设置 使 用 的 布局 方式 和 包含 的 子 
组 件 。 这 两 个 参数 我 们 在 前 面 的 示例 中 都 讲 过 了 ， 只 要 进行 布局 ， 就 必然 会 用 到 这 两 个 参数 。 与 
这 两 个 参数 对 应 的 还 有 另外 两 个 参数 ， 它 们 在 需要 进行 特殊 配置 时 非常 有 用 : iayoutconfig 用 
来 为 布局 提供 特定 的 配置 参数 ， 实 例 化 过 程 中 ， 当 前 类 会 把 自身 的 layoutconfig 参 数 赋予 
layout 对象 并 进行 配置 ， activeItem 则 表示 当前 显示 哪 一 个 子 组 件 ， 这 在 AccordionLayout 和 
CardLayout 等 每 次 只 能 显示 一 个 子 组 件 的 布局 方式 中 非常 有 用 。 在 其 他 布局 方式 中 ， 因 为 所 有 子 
组 件 都 会 显示 出 来 ， 所 以 基本 上 不 会 用 到 。 

要 重点 提 及 的 一 个 参数 是 aefaultType， 在 子 组 件 没有 指定 xtype 参 数 时 ， 就 会 使 用 上 级 组 
件 中 设置 的 aefaultType 来 作为 自身 的 xtype。 默 认 情 况 下 是 defaultType:'panel'， 也 就 是 
在 items 中 创建 的 每 个 子 组 件 都 是 Ext .Panel 的 实例 。 如 果 需 要 使 用 其 他 类 型 的 组 件 ， 我 们 也 无 
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需 重新 建 一 个 对 应 类 型 的 实例 ， 只 要 把 xtype 替 换 成 对 应 类 型 的 值 邑 可 。 这 个 功能 在 表单 部 分 中 
可 以 经 常 看 到 ， 通 过 xtype 可 以 任意 指定 使 用 Textfielid、Datefield 或 Textarea， 非 常 方便 。 
在 EXT 中 ，xtype 是 一 大 特性 ，{xtype: 'grid'} 与 new Ext .grid.GridPanel () 是 等 价 的 ， 
我 们 可 以 在 items 中 编写 如 下 的 代码 : 
items:[t 
XtypDe: grid 
store: store, 


columns: columns 
}] 


也 可 以 编写 如 下 的 代码 : 
items: [new Ext .grid.Gridpanell{t{ 
store; store, 
columns: columns 
})] 
进行 整体 布局 时 ， 使 用 xtype 更 方便 ， 结 构 也 更 清晰 ， 而 使 用 创建 实例 的 方式 更 适用 于 需要 
对 某 一 部 分 进行 详细 配置 的 情况 。 
xtype 是 通过 Ext .reg('grid' ,Ext .grid.GridPanel) ;的 方式 注册 到 EXT 的 ComponentMgr 
中 的 ， 在 API 文 档 中 都 没有 提 及 ， 可 以 参考 EXT 发 布 包 中 source 目 录 下 的 源 代码 , 一 般 都 放 在 最 后 
一 行 ， 直 接 搜索 “Ext.reg” 也 可 以 找到 。 





8.10.2 layonut 的 超 类 Ext .layout .ContainerLayout 


上 面 我 们 介绍 了 EXT 提 供 的 布局 类 ， 下 面 将 讲解 它们 的 超 类 Ext .1ayout .Container- 
Layout， 它 里 面 只 设置 了 所 有 布局 类 需要 的 一 些 配置 ， 本 身 并 没有 包含 布局 的 功能 ， 其 至 EXT 
中 不 建议 使 用 这 个 类 进行 布局 。 下 面 我 们 使 用 Ext .1ayout .ContainerLayout 实 现 一 个 布局 示 
例 ， 如 代码 清单 8-15〈 见 10-02.html) 所 示 。 


代码 清单 8-15 ”使 用 Ext .1ayout .ContainerLayout 实 现 布局 


Var viewport = new Ext .Viewpcrt ({ 
layout: 'auto', 
items:[t 

html: 'panel 1',， 
Fi 

html: 'panel 2'， 
Fist 

htemls woenel, 3 
Ft 

hrml: 'panel 4', 
}] 

交 同 1 


注意 ，Ext .layout .ContainerLayout 与 1ayout 对 应 的 关键 字 是 auto， 它 意味 着 这 个 布局 
尚未 实现 任何 功能 ， 如 图 8-33 所 示 。 
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图 8-33 ”使 用 ContainerLayout 实 现 的 布局 


图 8-33 中 4 个 面板 并 排放 在 一 起 ， 没 有 任何 布局 效果 的 修饰 。 而 Ext .layout .Container- 
Layout 中 的 配置 也 只 有 两 个 ， 分 别 是 用 来 指定 CSS 样 式 的 extraclis 和 用 来 在 渲染 后 隐藏 所 有 子 
组 件 的 renderHidden。 它 们 都 不 常用 ， 实 际 使 用 时 完全 可 以 把 Ext .layout .ContainerLayout 
忽略 掉 。 


8.10.3 不 指定 任何 布局 时 会 发 生 的 情况 


如 果 在 使 用 Ext .container 和 它 的 子 类 时 不 指定 任何 布局 方式 ， 那 么 会 不 会 因为 没有 设置 
布局 而 出 现 问题 呢 ? 为 此 ， 我 们 先 来 看 看 表 8-4 中 的 布局 类 型 。 


表 8-4 组件 默认 使 用 的 布局 类 型 


组 件 默认 布局 
Ext .Container Ext .layout .ContainerLayout 
EXxt .Viewport Ext .layout .ContainerLayout 
Ext .Panel] Ext .layout .ContainerLayout 
Ext .TabPane1 Ext .layout .CardLayout 
Ext .Tip Ext .layout .ContainerLayout 
Ext .Window Ext .layout .ContainerLayout 
Ext .form.Fieldset Ext ,layout ,FormPanel 
Ext .form.Formpanel Ext .layout .FormPanel 
Ext .tree.TreePanel Ext .layout .ContainerLayout 
Ext .gird.GridPanel Ext.layout .ContainerLayout 
Ext .grid.EditorGridPanel Ext .layout .ContainerLayout 
Ext .grid.PropertyPanel Ext .layout ,ContainerLayout 


在 默认 情况 下 ，Ext .container 会 在 没有 设置 布局 时 创建 Ext .1layout .Conainter- 
Layout， 这 样 我 们 就 不 用 担心 因为 忘记 设置 布局 而 出 现 问题 了 。 当 希望 指定 特定 布局 时 ， 只 要 
设置 到 参数 里 就 会 生效 。 

当然 , 也 不 是 所 有 的 子 类 都 使 用 默认 的 Ext . 1ayout .ConainterLayout。 比 如 Ext .TabPanel 
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默认 使 用 Ext . layout .CardLayout，Ext .form.FieldSet 和 Ext .form.FormPanel 使 用 的 则 是 
Ext .layout .FormLayout。 其 中 Ext .TabPanel 更 特殊 ， 为 了 实现 它 内 部 的 效果 ， 它 强制 使 用 
cardLayout， 我 们 不 能 简单 使 用 传递 参数 的 方式 直接 修改 它 的 布局 方式 ， 其 实 这 是 一 种 保护 内 
部 实现 不 遭 到 破坏 的 方法 。 


8.10.4 使 用 viewport 对 整个 页 面 进行 布局 


上 面 的 示例 中 , 我 们 都 是 使 用 Ext .Viewport 对 整个 页 面 进行 统一 布局 。 从 继承 树 来 看 ,Ext . 
Viewport 是 直接 继承 自 Ext .Container 的 ， 它 基 本 上 没有 修改 Ext .Container 中 的 任何 操作 ， 
只 是 在 初始 化 阶段 去 获得 当前 页 面 的 宽度 和 高 度 信 息 , 并 把 自己 的 一 些 事件 监听 函数 绑 定 到 页 面 
上 ， 以 此 来 实现 跟踪 页 面 大 小 的 改变 、 动 态 调节 自身 大 小 的 功能 。 

实际 上 Viewport 只 是 一 个 用 于 整 页 布局 的 快捷 工具 类 ， 但 因为 它 跟 页 面 关 系 紧密 ， 会 造成 
操作 上 的 一 些 混淆 。 比 如 ， 有 些 人 会 忘记 每 个 页 面 只 能 有 一 个 Viewport 的 限制 ， 直 接 把 其 他 页 
面 的 布局 复制 过 来 ， 当 作 另 一 个 页 面 中 的 子 布局 ， 并 以 为 它 可 以 在 其 他 Viewport 中 正常 工作 ， 
最 后 导致 多 个 viewport 之 间 出 现 冲突 ， 使 整个 页 面 变 得 混乱 。 

我 们 专门 提供 了 一 个 Viewport 冲 突 的 示例 ， 如 图 8-34 所 示 。 


www. fami 1y168. com 出 品 


菜单 1 
菜单 2 





图 8-34 ”多 个 Viewport 冲 突 的 情况 
实现 过 程 如 代码 清单 8-16〈 见 10-04.html) 所 示 。 
代码 清单 8.16. Yaewpozrt 溃 突 


Var Viewport = new Ext .Viewport {1 
layout: '‘'border', 


items; [{ 
region: ‘north', 
height: 40, 


html: '<hl>www.family168.com 出 品 </h1i>' 


region: ‘west', 
width: 100, 
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html: '<p> 菜 单 1</p><p> 菜 单 2</p>' 


region: 'center', 
Xtype: 'viewport', 
html:， ' 主 要 内 容 ' 
3 . 
这 里 使 用 了 BorderLayout 布 局 方式 ， 而 center 部 分 又 使 用 xtype: 'viewport' 添 加 了 另 一 个 
Ext .Viewport, 最 终 造成 整个 页 面 布局 失败 。 
这 种 情况 下 ， 如 果 想 使 用 其 他 页 面 中 写 好 的 布局 方式 ， 就 不 能 直接 把 Viewport 整 个 复制 到 
男 一 个 页 面 里 ， 而 应 该 把 Vi ewport 修 改 为 Ext .Pane1l， 附 上 对 应 的 宽度 和 高 度 信息 ， 这 样 才能 
保证 移植 过 去 的 布局 可 以 正常 工作 。 


8.10.5 ”使 用 赃 套 实现 复杂 布局 
搓 套 布局 比较 复杂 ， 下 面 我 们 来 看 一 下 viewport 里 嵌 套 实现 的 布局 ， 效 果 如 图 8-35 所 示 。 
标题 栏 ，vi emport 加 panei 实 现 香农 布局 TREE 


est Tenter north 
) 有 下 要 如 号 名 办 浴 述 
村 Oi 
二 02 1 | ec 
Name escri 
Name GescnS 
names escns 
5 Mmes descn5 
enter -center 
去 本 框 : 
| 让 | 


状态 栏 ， Copyright by ww fami lyi68. com 
图 8-35 ” 峙 套 实现 的 复杂 布局 


其 实 这 些 树 形 、 表 格 和 表单 都 是 从 前 几 章 的 代码 中 抽取 出 来 的 , 使 用 布局 组 合 起 来 之 后 就 变 
成 了 图 8-35 的 效果 ， 当 然 也 需要 做 一 些 调整 。 
嵌 套 实现 复杂 布局 的 过 程 如 代码 清单 8-17 所 示 。 


代码 清单 8-17 幅 套 实现 复杂 布局 
1/ 布局 开始 


Var Viewport = new Ext.Viewport!{ 
layout: 'border', 
Items: [{ 
region: 'north' ， 
contentEl: ‘north-div', 
height: 80, 
bodyStyle: ‘background-color:#BBCCEE;' 
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region: 'south', 
contentEl: ‘south-div', 


height: 20, 
bodyStyle: 'background-color:#BBCCEE;' 
Fitreest 


region: 'center', 
split: true, 
porder: true, 
layvouts “border',y 
items: [grid, form) 


) 

/机 局 结束 

north 和 south 部 分 没有 变 ， 只 是 在 原来 的 west 部 分 直接 放 上 了 树 形 。center 部 分 先 设置 
layout : 'border ' 使 用 边界 布局 ， 然 后 在 items 里 分 别 配 置 表格 和 表单 。 

下 面 我 们 将 分 区 域 进行 讲解 。 

先 看 一 下 north 和 south 部 分 的 代码 , 现在 只 有 这 两 部 分 需要 contentE1 来 指定 HTML 中 的 显示 
内 容 ， 如 下 面 的 代码 所 示 。 

<div id="north-div"> 标 题 栏 ，Viewport 加 Paneli 实 现 复杂 布局 < /Giv> 

<div id="south-div"> 状 态 栏 :; Copyright by www.familyi68.com</Giv> 

布局 里 只 设置 了 高 度 和 背景 颜色 ， 可 以 通过 boayscyle 设 置 整 体 的 CSS 样 式 。 

接 下 来 是 west 区 域 的 树 形 。 我 们 来 看 看 TreePaneI 的 定义 ， 如 代码 清单 8-18 所 示 。 


代码 清单 8-18 ”和 骸 套 布局 中 的 TreePanel 


Var tree = new Ext.tree.TreePanell(t{ 
loader: new Ext .tree.TreeLoader{{GataUrl: '10-05.tree.txt')}), 
title: 'west', 
region: ‘west', 
split: true, 
border: true, 
collapsible: true, 
width: 120, 
minSize: 80， 
maxSize: 200 
}3 
Var root = new Ext.tree.AsyncTreeNode{{text: ' 侦 是 根 '}); 
tree.setRootNode{lroot); 
root .expand(); 


tree 里 定义 了 很 多 参数 ， 其 实 就 是 把 之 前 写 在 Viewport 中 的 用 来 定义 大 小 、 边 界 、 是 否 可 
拖 放 、 标 题 、 是 否 可 折 登 的 参数 都 转移 了 过 来 。 

或 许 你 会 感到 困惑 ， 为 什么 可 以 把 参数 直接 放 到 树 形 里 昵 ? 其 实 这 个 viewport 中 的 每 个 子 
组 件 都 是 Panel 类 型 ， 而 Panel 包 含 的 范围 很 广 ， 有 TreePanel、GridPanel 和 FormPanel。 所 以 ， 
可 以 放 Panel 的 地 方 ， 也 可 以 放 它们 ， 而 且 Panel 的 配置 参数 ， 它 们 也 都 可 以 用 。 我 们 之 前 没有 指 
定 具 体 用 哪 一 种 Panel，Viewport 就 会 使 用 默认 的 Panel。 现 在 我 们 指定 了 TreePanel1， 所 以 
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Viewport 原 来 的 参数 就 放 到 TreePanel 中 了 。 

EXT 的 布局 给 我 们 带 来 了 很 大 的 方便 ， 在 任何 一 个 Panel 里 设置 1ayout : 'border' 就 可 以 将 
它 再 次 分 成 5 个 区 域 。 可 以 在 这 5 个 区 域 里 再 次 用 Panel， 并 用 region 参 数 指定 各 自 所 处 的 位 置 。 
还 可 以 在 里 面 的 Panel 上 设置 layout， 一 直 网 套 循 环 下 去 。 

下 面 我 们 看 看 创建 表格 的 那 部 分 代码 : 


var grid = new Ext .grid,GridPanelt{t{ 
ds: ds, 
cm: cm, 
title: 'center-north', 
region: ‘north’ 
站 


注意 , 代码 里 多 了 tit1le 参 数 , 用 于 设置 布局 上 的 标题 , region:north 说 明 此 部 分 放 在 center 
区 域 的 上 方 。 同 样 ， 我 们 为 表单 设置 了 region: 'center'， 代 表 的 是 Viewport 的 中 央 区 域 。 该 
示例 的 完整 代码 如 下 所 示 : 


// 表格 配置 开始 
Var cm = new Ext .grid.ColumnModel (I[ 
{header: ' 编 号 ' ,dataTndex:'id']},， 
{header: ' 名 称 ' ,dataIndex: 'name'}，, 
{header: ' 描 述 ' ,dataIndex:'descn'} 


var data = [ 
{1?,'namel','descnl'], 
Carnme docn2.] 
[('3','name3','descn3']), 
['4', 'name4', 'descn4'], 
['5', 'nameS5', ‘descnS5'] 


Var ds = new Ext.data.Storet{t 
proxy: new Ext .data.MemoryProxy (data), 
reader: new Ext .data.ArrayReader{({}, I 
{name: 'id'}, 
{name: 'name'}, 
{name: !'descn'} 
] ) 
于 
ds.1load(); 


var grid = new Ext .grid.GridPanel{({ 
ds: ds, 
cm: cm, 
titlje: ‘'center-north’, 
region: 'north' 


于 
// 表格 配置 结束 
// 树 形 配置 开始 


Var tree = new Ext .tree.TreePanel(({ 
loader: new Ext.tree.TreeLoader ({dataUrl: '10-05.tree,.txt'}), 
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title: ‘west', 
region: ‘west', 
split;: true, 
border: true, 
collapsibie: true, 
width: 120, 
minSize: 80, 
maxSize: 200 

1 


Var root = new Ext.tree.AsyncTreeNode{{text:'" 偶 是 根 '})，; 
tree.setRootNode (root); 
root .expand(); 


// 树 形 配置 结束 
// 表单 配置 开始 


Var form = new Ext.form.FormPpanel ({ 
defaultType: '‘'textfield', 
labelAlign: '‘'right', 
title: 'form', 
labelwWidth: 50, 
frame:true, 
width: 220, 


title: 'center-center', 
region: 'center', 





items:;: [{ 
fieldLabel: ' 文 本 框 ' ， 
anchor: ‘90%' 
ja 
buttons: i{ 
text: ' 按 钮 ' 
}] 
})3 
// 天 单 配置 结束 


// 布局 配置 开始 
Var Viewport = new Ext .Viewport({t{ 
layout: 'bordGer ' ， 
items:[{ 
region: 'north', 
contentEl: 'north-div'!, 
height: 80, 
bodySsStyle: ‘background-color:#BBCCEE;' 
J 守 
region: 'south', 
contentEl: 'south-div', 
height: 20, 
bodyStyle: 'background-color:#BBCCEE;' 
},tree,l 
region: 'center', 
split: true, 
border: true, 
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layout: 'border', 
items;: [grid, form] 
}] 
}3: 


从 上 面 的 例子 中 我 们 可 以 看 到 ,结合 Viewport 和 Panel 就 可 以 实现 非常 复杂 而 且 完 美的 布局 。 
8.11 BoxLayout 


在 EXT 3 之 前 如 果 希 望 进行 分 列 布局 只 能 选用 ColumnLayout， 实 际 上 很 少 有 人 去 用 
TableLayout 布 局 方式 的 , 但 是 在 一 些 情况 下 只 需要 将 几 个 组 件 平行 排列 ， 使 用 ColumnLayout 就 显 


得 过 于 复杂 了 。 
在 EXT3.x 版 本 之 后 ， 我 们 可 以 使 用 BoxLayout 来 实现 在 一 行 中 排列 多 个 组 件 的 功能 ， 效 果 如 
图 8-36 所 示 。 
HBox 
Button 1 Button 2 Button 3 Button 4 


图 8-36 ”HBox 水 平 布局 
图 8-36 中 使 用 HBox 布 局 对 4 个 按钮 进行 了 水 平 布局 ， 实现 代码 如 下 所 示 : 


Var panel = new Ext,Panellt{ 
title: “HBox' ， 


width: 400, 
height: 200, 
renderTo: ‘grid', 
iayout: { 
type:; 'hbox: ， 
padding:'5',， 


align: 'stretch' 
3 
deftaults: {margins:'0 0 5 0'}, 
items:[t 

xtype: ‘button’, 

texts Bitton 1*, 

flex:1 


XxXxtype: ‘button’', 


bentt, "Button 2", 
fiex:1 
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xtype: 'button' 
text: 'Button 
flex:1 


Wo = 


xtype: 'button' 
text: ‘Button 
flex:3 


i = 


}] 
四) 


与 布局 相关 的 配置 放 在 layout 属 性 中 ， 我 们 使 用 type:'hbox' 指 定 当前 的 Panel 使 用 HBox 
布局 方式 ， 可 以 为 其 中 每 个 组 件 设置 f1ex 属 性 ，f1lex 属 性 越 大 ， 对 应 的 组 件 就 会 占据 越 大 空间 。 

HBox 中 还 支持 使 用 align 属 性 对 布局 中 的 组 件 设置 统一 的 对 齐 方式 , 如 上 例 中 将 align 属 性 
设置 为 ‘stretch' 就 会 将 Panel 内 部 的 组 件 高 度 都 自动 设置 为 充满 外 部 容器 的 大 小 ， 还 可 以 将 
align 属 性 设置 为 'top'、'middle'、'strechmax' 等 值 。 

最 新 发 布 的 EXT 3.1 版 本 又 添加 了 VBox 布 局 ， 可 以 参考 14.5.6 节 。 


8.12 小结 


本 章 主要 介绍 了 EXT 中 的 一 大 亮点 一 一 布局 的 应 用 。 

主要 介绍 了 布局 的 应 用 场景 ， 以 及 哪些 组 件 可 以 支持 布局 ， 并 提供 了 布局 类 的 继承 结构 图 。 
随后 详细 讨论 了 各 种 布局 的 应 用 ， 包 括 FitLayout、BorderLayout 、Accodion 、CardLayout 、 
AnchorLayout、AbsoluteLayout、ColumnLayout 和 TableLayout。 

同时 讨论 了 和 布局 相关 的 一 些 问 题 ， 介 绍 了 Ext .container 和 containerLayout 的 功能 ， 
还 列 出 了 组 件 对 应 的 默认 布局 。 然 后 介绍 了 如 何 使 用 Viewport 对 整个 页 面 进行 布局 ， 并 演示 了 
如 何 使 用 嵌 套 实现 复杂 布局 。 

最 后 介绍 了 EXT 3.x 中 新 添加 的 BoxLayout， 介 绍 了 如 何 使 用 HBox 实 现 更 简单 的 水 平分 列 
布局 。 
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第 9 章 
工具 条 和 菜单 





本 章 内 容 

口 简单 菜单 

口 向 菜单 中 添加 分 隔 线 

口 多 级 菜单 

D 高 级 菜单 

0 工具 条 组 件 详解 

日 分 页 工具 条 Ext .PagingToolbar 
D 右键 弹出 菜单 


9.1 简单 菜单 


菜单 的 种 类 很 多 ， 如 下 拉 菜 单 、 分 组 菜单 、 右 键 菜单 ， 等 等 。 右 键 菜单 与 在 Windows 桌 面 上 
单 击 右键 弹出 的 菜单 效果 一 样 , 只 是 样式 不 同 。 菜单 上 的 内 容 包 括 文本 、 单 选 框 、 按 钮 等 。 对 EXT 
来 说 ， 这 些 菜单 的 实现 都 非常 简单 。 
我 们 可 以 在 一 个 面板 的 顶端 或 底 端 放置 一 横 排 功能 按钮 ， 按 新 建 ， 何 改 ，、 删 除 、， 吕 示 
下 不 同 的 按钮 时 会 执行 不 同 的 操作 。 我 们 把 这 个 横 条 称 为 工具 条 ， 
放 在 工具 条 上 的 按钮 称 为 菜单 〈 见 图 9-1)。 图 9-1 一 个 简单 的 工具 条 
这 个 工具 条 虽然 有 些 简 陋 ， 但 已 经 在 它 上 面 放 了 4 个 按钮 。 下 面 先 来 看 看 实现 工具 条 的 代码 
〈 见 代码 清单 9-1)， 然 后 再 来 看 看 菜单 的 具体 用 法 。 


代码 清单 9-1 简单 工具 条 的 实现 


// 创建 工具 条 
Var tb = new Ext.Toolbart{); 
tb.render('toolbar' ) ; 


// 为 工具 条 添加 4 个 按钮 
tb.addl{ 

text: ' 新 建 ' 
}, 4 

text: :修改 ， 
2 
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text: “删除 ， 
Ft 

text: ' 显 示 ' 
1); 


先 创 建 一 个 工具 条 ， 用 工具 条 的 render () 函数 把 它 泻 染 到 一 个 DIV 标 签 上 ， 然 后 调用 工具 
条 的 add 函 数 , 向 工具 条 中 添加 4 个 按钮 。 在 没有 特别 指定 使 用 哪 种 类 型 的 情况 下 , 会 默认 自动 转 
换 成 按钮 类 型 。 

示例 在 09.menu\01-01.html 中 。 

现在 单 击 菜单 上 的 按钮 不 会 有 任何 效果 。 如 果 想 单 击 按钮 后 能 执行 某 种 操作 ， 青 要 为 这 些 按 
钮 设置 对 应 的 事件 处 理 函 数 (handler)， 如 下 面 的 代码 所 示 。 


tb ,addaGiti{ 
text : 新建 ' ， 
handler: function{) { 
Ext .Msg .alert(' 提 示 :，' 新 建 '); 
} 


text: ' 收 改 '， 
handler: function{() { 

Ext .Msg .alert(' 提 示 '，' 修 改 ')， 
} 


text: ' 删 除 '， 
handler: function() { 

Ext .Msg .alert(' 提 示 ' ，' 删 除 ' ) ; 
} 


text: ' 显 示 '， 
handler: Eunction() 1{ 
Ext .Msg.alert( :提示 '， ' 新 建 ' ) ; 
} 
}}; 


为 每 个 按钮 设置 事件 处 理 函 数 后 ， 单 击 按钮 后 就 会 弹出 相应 的 对 话 框 ， 这 样 就 可 以 为 每 个 按 
钮 设置 功能 了 。 虽 然 现 在 实现 的 功能 只 弹出 了 一 个 对 话 框 ， 但 在 实际 使 用 中 ， 你 可 以 在 这 个 事件 
处 理 程序 里 实现 任何 其 他 的 功能 。 

示例 在 09.menu\01-02.html 中 。 


9.2 向 菜单 中 添加 分 隔 线 
向 菜单 中 添加 分 隔 线 的 方式 有 如 下 两 种 。 
口 使 用 连 字 符 或 ' separator ' 作 为 参数 ， 如 下 面 的 代码 所 示 。 


menuFile.add('-'); 
menuFile.add('separator') 


口 用 Ext .menu .Separator 的 实例 作为 参数 ， 如 下 面 的 代码 所 示 。 


menuFile.add (new Ext .menu.Separator(}); 
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Ext .menu.Separator 显 示 在 页 面 上 就 是 一 条 水 平 线 ， 可 以 使 用 它 将 交 作 rn 


菜单 中 不 同类 型 的 菜单 项 分 隔 显 示 ， 如 图 9-2 所 示 。 | 5 
默认 情况 下 , 直接 向 菜单 中 添加 连 字 符 '- ' 就 可 以 使 用 菜单 分 隔 线 了 。 
完整 代码 如 下 所 示 : "A 
var tb = new Ext.Toolbar(); 保存 
tb.render('toolbar'); 
var menuFile = new Ext.menu.Menu{(); 关闭 


menuFile.add({text: ' 新 建 '})， 
menuFile.add{'-'): 

menuFile.add({text: ' 打 开 '}); 
menuFile.add('separator'); 
menuFile.add{{text: ' 保 存 ')); 
menuFile,add(new Ext.menu.Separator()):; 
menuFile.add{ {text: ' 关 闭 '}); 


图 9-2 菜单 分 隔 条 


// 为 工具 条 添加 4 个 按钮 
tb.add({t 
text: ' 文 件 '， 
menu: menuFile 
J 
tb.doLayout () ; 


该 示例 代码 在 09.menu/02.html 中 。 


9.3 多 级 菜单 
在 之 前 的 示例 中 ， 我 们 只 是 在 工具 条 上 添加 了 几 个 按钮 ， 区 舍 改 ” 出 眼 -*， 型 示 ” 


如 果 想 要 这 些 菜 单 有 更 多 的 功能 选项 (例如 图 9-3 中 的 效果 ), 那 | 新 条 一 
么 该 怎么 做 呢 ? 新 新 二 
如 果 我 们 想 在 工具 条 上 添加 更 多 的 功能 按钮 ， 就 可 以 像 图 新 新 三 


9-3 一 样 ， 把 这 些 功 能 按钮 放置 在 下 拉 菜 单 中 。 实 现 方法 是 先 创 
建 一 个 Ext .menu .Menu， 然 后 再 把 它 放 到 工具 条 里 ， 如 代码 清 图 9-3 有 下 拉 菜 单 的 简单 工具 条 
单 9-2 所 示 。 


代码 清单 9-2 ”下拉 菜 单 的 实现 


Var menul = new Ext.menu.Menult 
items: [ 


{text: ' 新 新 一 '}， 
{text: ' 新 新 二 ' )， 
{text: ' 新 新 二 '} 
] 
}33 
tb.ada({t 
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text: ' 新 建 '， 次 人 /ed| 格 作 > 
menu: menul 诉 律 
}); 有 
从 上 面 代码 中 可 以 看 到 , 在 对 工具 条 执行 aada() 操 作 的 部 | 保 间 
分 中 ，text 依 然 对 应 着 工具 条 上 显示 的 文字 ， 下 面 使 用 menu 另存 ，， 
参数 指定 了 用 户 在 单 击 “ 新 建 ”按钮 时 会 弹出 的 下 拉 菜 单 。 此 ge 
时 ， 工 具 条 中 显示 的 “新 建 ”按钮 旁边 会 出 现 一 个 黑色 的 三 角 
形 ， 单 击 它 就 会 弹出 上 面 定 义 好 的 菜单 。 2 1 
下 拉 菜 单 可 以 嵌 套 ,而 且 嵌 套 的 层 数 是 任意 的 ,我 们 先 来 
看 一 个 两 层 结构 的 菜单 《 见 图 9-4)。 
实现 方法 很 简单 ， 只 要 在 下 拉 菜 单 中 再 加 上 menu 参 数 并 
指定 对 应 的 下 级 菜单 即 可 ， 如 代码 清单 9-3 所 示 。 图 9-4 ”一 个 两 层 结构 的 嵌 套 菜单 


代码 清单 9-3 ”和 崔 套 菜单 的 实现 


var menuHistory = new Ext ,menu .Menui({ 
items: [ 


{text: ' 今 天 ')， 
{text: ' 了 昨天 '}， 
{text: ' 一 周 '}， 


{texts *— 月 7); 
{text: ' 一 年 '】 
] 
六 : 


var menuFile = new Ext.menu.Menult 





items: [ 
{text: ‘新 建 '}， 
{text: “打开 ')}， 
{text: ' 保 存 '}， 


{text: ' 另 存 ,..'}， 


{text: ' 历 史 ',， menu: menuHistory]， 


{text: ' 关 闭 '] 
] 
F's 


在 上 面 的 代码 中 可 以 看 出 ， 我 们 可 以 直接 使 用 menu 参 数 指定 在 菜单 的 哪个 部 分 加 上 子 菜单 。 
利用 这 些 方法 ， 我 们 就 可 以 轻易 实现 自己 想 要 的 功能 菜单 了 。 完 整 代码 如 下 所 示 : 


var tb = new Ext.Toolbar!():; 
tb.render('toolbar'); 


Var menuHistory = new EXt.menu .Menuii 
items: [ 
{text: ' 今 天 '}， 


{text: ' 昨 天 '}， 
{text: 一周 ' ) ， 
{text: ' 一 月 '}， 
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{text: ' 一 年 ') 
})? 


var menuFile = new Ext.menu.Menult{ 


items: [ 
{text: ' 新 建 ' } ， 
{text: ‘打开 '})， 
{text; '! 保 存 '}， 


{text: :另存 ..-. ')， 


{text: :历史 ' ， menu: menuHistory}, 


Ci :关闭 '} 
] 
Pyey 


var menuOQperator = new Ext .menu.Menult 


items: [ 
{text: ' 增 加 '}， 
{text :; 删除 ' ) ， 
{text; ' 修 改 ']】 
] 
地 
// 为 工具 条 添加 4 个 撤 钮 
tb.addl(t 
text: ' 文 件 '， 


menu: menuFile 
},{ 

text: ' 扎 作 '， 

menu: menuOperator 
}); 
tb.doLayout (); 


示例 在 09.menu/02-01.html 和 02-02.html 中 。 


9.4 ”高 级 菜单 
除了 上 面 提 到 的 最 基本 的 菜单 按钮 ，EXT 还 为 我 们 提供 了 一 些 功能 比较 复杂 的 菜单 控件 ， 供 


我 们 直接 调用 。 
Pe 

9.4.1 ”多 选 菜 单 和 单 选 菜单 rp 
这 里 并 没有 将 复 选 框 (checkbox) 或 单 选 框 (radio) 放 到 工具 | 四 着 人 | 


J 


条 上 ， 我 们 看 到 的 都 是 用 图 片 实现 的 选择 效果 。 一 一 一 
多 选 菜单 的 效果 如 图 9-5 所 示 ， 实 现 过 程 如 代码 清单 9-4 所 示 。 。 图 9-5 “在 菜单 中 支持 多 先 


代码 清单 9-4 ”在 菜单 中 支持 多 选 


Var menuCheckbox = new Ext.menu.Menult{ 
items: [ 
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new Ext .menu.CheckIterm({ 
text: ' 粗 体 ' ， 

checked: true, 
checkHandler: 

Ext .Msg .alert (' 多 选 '， 


function{({item, checked) { 


} 
ja 
new Ext.menu.CheckIteml!({ 
text: ' 斜 体 or 
checkHandler: 
Ext .Msg .alert(' 多 选 '， 


function(item, checked)} { 


} 
}) 


我 们 这 里 使 用 的 是 Ext .menu .CheckItem，text 参 数 表示 菜 
单 上 显示 的 文字 ，checkeq 参 数 表示 当前 菜单 项 是 否 被 选中 了 ， 
checkHandler 用 来 指定 选择 菜单 时 执行 的 处 理 函 数 , 与 普通 菜单 
不 同 的 是 ， 它 多 了 一 个 checked 参 数 ， 这 个 参数 可 以 告诉 我 们 用 
户 执 行 的 是 选中 操作 ， 还 是 取消 操作 。 

下 面 我 们 来 看 看 单 选 菜单 ， 效 果 如 图 9-6 所 示 。 

实际 上 ， 在 单 选 和 多 选 两 种 情况 下 使 用 的 都 是 Ext .menu. 
CheckItem， 唯 一 不 同 的 是 group 参 数 ， 如 代码 清单 9-5 所 示 。 


代码 清单 9-5 ”在 菜单 中 使 用 多 选 


var menuRadio = new EXE .menu.Menu({ 
items: I 


3 
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new Ext .menu .CheckItem({ 
text : ' 宋 体 ' ， 
Group: 'font', 
checked: true, 
checkHandler: 


function(item, checked) { 


Ext .Msg.alert{' 多 选 '，(checked ? ' 选 中 ' : 


让 
}), 
new Ext .menu.CheckItemlt{ 
text: ' 黑 体 '， 
group: ‘font', 
checkHandler: function(item, checked) { 
EXxt .Msg .alert(' 多 选 '， {checked ? ' 选 中 ' 
} 
Py 
new Ext.menu.CheckItem({ 
text: ' 楷 体 ' 
group: ‘font', 
checkHandler: function(item, checked) ({ 
Ext .Msg .alert (' 名 选 '， (checked ? “' 选 中， 
} 
}) 


(checked ? ' 选 中 ' : 


(checkeqd ? ' 选 中 ' : 


9.4 ”高 级 菜单 。 243 
:取消 ') + ' 粗 体 '); 
“取消 ') + “斜体 ' ) ; 
昌林 体 
篆 休 
懂 体 


图 9-6 在 菜单 中 支持 单 选 


' 取 消 ') + ' 宋 体 '); 
: “取消 ') + ' 黑 体 '); 
: ' 取 消 ') + ' 楷 体 ')，; 
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我 们 使 用 group 参 数 统 一 管理 多 个 checkITtem， 在 单 选 的 情况 下 ， 事 件 处 理 函 数 
checkHandler 中 使 用 的 checked 参 数 的 值 一 直 是 true。 因 为 group 中 的 checkItem 会 在 用 户 执 
行 操作 时 自动 切换 本 身 的 状态 ， 保 证 每 次 只 有 一 个 按钮 被 选中 。 

示例 在 09.menu\03-01.html 中 。 


9.4.2 日 期 菜单 


EXT 为 我 们 提供 了 选择 日 期 的 菜单 Ext .menu.DateMenu， 它 
可 以 让 我 们 直接 把 日 期 选择 功能 加 入 到 菜单 中 , 效果 如 图 9-7 所 示 。 
注意 ， 这 上 时 Ext.menu.DateMenu 是 一 个 Menu 而 不 是 
MenuItem， 使 用 时 应 该 用 menu 参 数 将 它 设 置 成 上 级 菜单 的 子 菜 





单 ， 如 下 面 的 代码 所 示 。 11 12 13 14 15 16 17 
tb.add (i{ 18 19 20 21 22 23 24 
text: ' 日 期 '， 25 26 27 28 29 30[3] 


menu: new Ext .menu ,DateMenu ({ 
handler : function(dp, date}{ | 
Ext .Msg .alert (' 选 择 日 期 '，' 选 择 的 日 期 是 {0}.'， | Today 
date.format ('Y 年 mm 月 G 日 ' ) ) ; | 
se 图 9-7 日 期 菜单 
ys 
注意 DateMenu 对 应 的 处 理 函 数 handler， 它 对 应 的 处 理 函 数 有 两 个 参数 : DatePicker 和 
date。DatepPicker 表 示 DateMenu 中 对 应 的 DatePicker 对 象 。date 表 示 用 户 选中 的 时 间 ， 这 是 
一 个 日 期 对 象 ， 如 果 把 它 显示 到 页 面 上 ,还 需要 使 用 日 期 函数 默认 的 形式 转换 成 需要 的 形式 。 
为 日 期 函数 本 身 的 格式 是 YYyYy-MM-DDThh :mm:ss， 而 我 们 显示 的 可 能 是 YYyY 年 MM 月 DD 日 ， 不 需 
要 中 间 的 T 或 者 后 面 时 、 分 、 秒 。 幸 运 的 是 ，EXT 内 置 了 format 函 数 ， 让 我 们 可 以 更 容易 得 到 需 
要 的 格式 。 
该 示例 在 09.menu\03-02.html 中 。 


9.4.3 颜色 菜单 


EXT 为 我 们 提供 了 选择 颜色 的 功能 菜单 Ext .menu. 一 人 
ColorMenu， 效 果 如 图 9-8 所 示 。 人 ET 
虽然 颜色 选择 菜单 并 不 常用 ， 但 它 的 效果 十 分 绚丽 。 它 的 时 
用 法 与 日 期 菜单 相似 ， 也 有 特定 的 handler， 让 我 们 可 以 直接 一品 
获得 选中 的 颜色 ， 如 下 面 的 代码 所 示 。 了 
tb.adat{t{ nd 
text: ' 颜 色 ' ， 
menu: new Ext .menu .ColorMenu{({ 图 9-8 颜色 菜单 
handler : function{cm, color}){ 
if (typeof color == 'string') 


{ 
Ext .Msg ,alert ({' 选 择 颜 色 ' ，' 选 择 的 颜色 是 ， + color); 
} 
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} 
jy 
Fs 


因为 EXT 本 身 的 一 些 问题 ， 某 种 颜色 被 选中 时 ， 它 的 handler 会 执行 两 次 ， 第 二 次 的 参数 会 
传 入 一 个 event 对 象 ， 所 以 要 在 函数 中 加 入 typeof 进 行 判断 ， 以 免 出 现 问 题 。 最 后 得 到 的 颜色 值 
是 一 个 6 位 的 字符 串 ， 在 它 前 面 加 上 # 后 就 可 以 直接 放 到 CSS 里 使 用 。 

示例 在 09.menu\03-03.html 中 。 


9.4.4 在 菜单 中 添加 其 他 组 件 


Ext .menu .Menu 中 不 仅仅 可 以 包含 基本 的 菜单 组 件 ， 表单 菜单 
也 可 以 将 Ext 中 的 其 他 组 件 放 在 菜单 中 。 下 面 将 一 个 自 定义 | 名 
的 FormPanel 添 加 到 菜单 中 ， 显 示 效 果 如 图 9-9 所 示 。 
为 了 实现 图 9-9 中 的 效果 ,我 们 只 需要 使 用 之 前 章节 中 名称 
的 方式 创建 一 个 FormPanel， 然 后 直接 将 此 FormPanel 添 加 确认 取消 
到 工具 条 中 的 menu 部 分 即 可 。 这 样 在 用 户 点 击 工具 条 上 的 
按钮 时 ， 就 会 弹出 与 之 对 应 的 FormPanel。 
自 定义 表单 菜单 的 代码 如 下 所 示 : 图 9-9” 自 定义 表单 菜单 


Ext .onReady (function()T{ 
Var form = new Ext.form.Formpanelt{t{ 

title: ' 输 入 '， 

frame: true, 

defaultType: '‘'textfield', 

labelWwidth: 50, 

width: 200, 

height: 100, 

items: [{ 
fieldLabel: ' 名 称 '， 
name: ‘name' 

1]; 

buttons: [{ 
text: ' 确 认 ' 

有 
text: :取消 ' ， 
Eunction() { 
} 





}] 
.4 


// 创建 工具 条 


Var tb = new EXt .Toolbar():; 

Var menu = new EXt .menu .Menu (1{ 
items: [form] 

} :3 


tb.addlt 
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text: ' 表 单 菜单 ' ， 
menu: menu 
}); 
tb,render('toolbar'); 
tb.doLayout (); 
和 


在 将 FormPanel 加 入 菜单 之 后 ，FormPanel 会 自动 拥有 菜单 的 特性 ， 如 我 们 在 菜单 显示 之 后 又 
使 用 鼠标 点 击 了 菜单 之 外 的 部 分 ， 菜 单 就 会 自动 收 起 。 如 果 希 望 实现 在 FormPanel 上 点 击 某 些 按 


钮 就 可 以 让 菜单 自动 收 起 ， 可 以 参考 下 一 节 中 Ext .menu .MenuMgr 的 使 用 方法 。 


示例 文件 在 09.menu/04-04a-1.html 中 。 


9.4.5 ”使 用 Ext .menu .MenuMgr 统一 管理 菜单 


EXT 为 我 们 提供 了 MenuMgr 来 统一 管理 页 面 上 所 有 的 菜单 。 每 创建 一 个 菜单 都 会 自动 注册 到 


Ext .menu.MenuMgr 中 ， 可 以 使 用 Ext .menu.MenuMgr 提 供 的 


mr 、 | 文 伯 | 规 作 
函数 对 菜单 进行 操作 。Ext .menu .MenuMgr 是 一 个 单 例 ， 我 们 ， 泗 ee 
不 必 创 建 它 的 实例 就 可 以 直接 调用 它 的 功能 函数 get (), 根据 0， se 
ig 获 得 对 应 的 菜单 。 | 

保存 
Ext .get ("showButton") .on("click", function() { 
Var menu = Ext.menu.MenuMgr .get ("menul"),; 田 存 
menu.show{tb.el),; 
yds 历史 ”上 
我 们 以 menu 的 id 作为 参数 , 调用 Ext .menu .MenuMgr .get () | 关闭 





函数 获得 对 应 的 menu 实 例 后 ， 可 以 直接 执行 各 种 操作 ， or 

menu . show{tb .el) ;调用 的 效果 是 将 刚刚 得 到 的 菜单 显示 在 工 删除 

具 条 下 面 ， 如 图 9-10 所 示 。 | 
MenuMgr 还 提供 了 hidaeal1l() 函数 ， 这 个 函数 的 作用 是 隐 


站 | hide button | 


藏 所 有 已 经 显示 的 菜单 ， 这 在 需要 清除 页 面 上 显示 的 菜单 时 非 ”图 9-10 MenuMgr 统 一 管理 菜单 


常 有 用 。 


Ext .get ({'hideButton').on('click', function{) { 
Ext .menu.MenuMgr .hideAll (); 
Fi3 


对 于 Ext .menu .MenuMgr 的 统一 管理 功能 的 完整 代码 如 下 所 示 : 


Var tb = new Ext.Toolbar(); 
tb.render{'toolbar'); 
Var menuHistory = new Ext.menu.Menult{ 
id: ‘'menul', 
allowotherMenus: true, 
items: [ 


{text: ' 今 天 ')， 
{text: ' 了 昨天 '}， 
{text: ' 一 周 ')， 
{tat 一 月 7 
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{text: ' 一 年 ') 
] 
二 
Var menuFile = new Ext .menu ,Menuit({ 
id: ‘menu2', 
allowOotherMenus: true, 


items: [ 
{text: ' 新 建 '}， 
{text: ' 打 开 '}， 
{text: ' 保 存 '}， 


{text: ' 另 存 ...']}， 


{text: ' 历 史 ',， menu: menuHistory}， 


{text: ' 关 闭 '}) 
i 
Var menuOperator = new Fxt .menu.Menul{t{ 


id: 'menu3 ' ， 
allowOotherMenus: true, 


items: [ 
{text: ' 增 加 ')， 
{text: “删除 ' }， 
{text: ' 修 改 '} 


Bs 
// 为 工具 条 添加 两 个 按钮 





tb .adqd({ 
text: ' 文 件 '， 
menu: menuFile 
Fd 
text: ' 操 作 '， 


menu: menuOperator 
HY: 
tb.doLayout (); 


Ext .get ("showButton*) .on("click", function() { 
var menul = Ext.menu.MenuMgr .get ("menul"); 
menul] .Show (tb.el) ; 

Var menu2 = Ext.menu.MenuMgr .get ("menu2"),; 
menu2 .Show (tb.el): 

Var menu3 = Ext.menu.MenuMgr .get ("menu3"); 
menu3 . Show (menu2 .el):; 

Ext .getDoc{) .removeAI1ILiSteners () ; 


Ext .get('hideButton') .on{'click', function() { 
Ext .menu .MenuMgr .hideAll (); 
}) ; 


示例 在 09.menu/04-05.html 中 。 
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9.5 工具 条 组 件 详解 


上 面 讲 解 了 菜单 的 基本 用 法 ， 下 面 将 进一步 讨论 EXT 中 与 工具 条 相关 的 组 件 。EXT 中 与 工具 
条 相关 的 所 有 组 件 如 表 9-1 所 示 。 





表 9-1 工具 条 组 件 

Xtype 组 ” 件 描 述 
Toolbar Ext .Toolbar 工具 条 
Tbbutton Ext .Toolbar .Button 按钮 
Tbfill Ext .Toolbar .Fill 右 对 齐 填充 '->， 
Tbitem Ext .Toolbar .Item 工具 条 项 日 
tbseparator Ext .Toolbar .Separator 工具 条 分 隔 符 '-' 
tbspacer Ext .Toolbar .Spacer 工具 条 空白 
tbsplit Ext .Toolbar .SplitButton 工具 条 分 隔 按钮 
tbtext Ext .Toolbar .TextILerm 工具 条 文本 项 

位 于 最 上 层 的 是 Ext .Toolbar, 通常 我 们 都 是 先 创建 一 个 Ext .Toolbar 工 具 条 , 然后 再 向 里 


面 添加 各 种 菜单 组 件 。 
比较 常用 的 组 件 有 tbbutton、tbtext、tbspacer、tpseparator 和 tbfil1l1。 下 面 我 们 将 
对 它们 进行 一 一 介绍 。 


9.5.1 Ext .Toolbar.Button 


同 菜单 中 添加 按钮 的 方式 有 如 下 几 种 。 
D 直接 使 用 包含 text 属 性 的 对 象 作为 参数 ， 如 下 面 的 代码 所 示 。 


tb.addt{{ 
text: ' 技 钮 * 
Ee 


口 创建 Ext .Button 的 实例 作为 参数 ， 如 下 面 的 代码 所 示 。 


th.add (new Ext.Buttontt{ 
text: ' 按 钮 
FF) :3 


0 创建 Ext .Toolbar .Button 的 实例 作为 参数 ， 如 下 面 的 代码 所 示 。 


tb.add (new Ext .Toolbar.,Buttontl 
text: ' 技 钮 ， 
Ei 
这 3 种 方法 都 可 以 得 到 菜单 按钮 ， 其 中 第 一 种 方法 最 简单 、 也 最 常用 ， 之 后 的 演示 中 我 们 就 
以 第 一 种 方式 向 菜单 中 添加 按钮 。 
9.5.2 Ext .Toolbar .TextMenu 


向 菜单 中 添加 文本 元 素 的 方式 有 如 下 几 种 。 
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口 使 用 文本 字符 串 作 为 参数 ， 如 下 面 的 代码 所 示 。 
tb.add( ' 文 本 ' ) ; 


D 使 用 包含 xtype: 'tbtext' 属 性 的 对 象 作为 参数 ， 如 下 面 的 代码 所 示 。 


tb.addl(t 
text: y 文本 ” 天 
xtype: ‘tbtext'’ 
只: 


口 使 用 Ext .Toolbar .TextItem 的 实例 作为 参数 ， 如 下 面 的 代码 所 示 。 


tb.add (new Ext .Toolbar .TextIEemt1{ 
text: :文本 ， 
2 


Ext .menu.TextItem 通 常 只 用 于 在 工具 条 上 显示 一 段 静 态 文 字 信息 ， 所 以 我 们 经 常 使 用 第 
一 种 方式 ， 直 接 把 需要 显示 的 信息 添加 到 工具 条 中 。 其 他 两 种 创建 方式 在 需要 为 Ext .menu. 
TextItem 设 置 附加 参数 时 才 会 用 到 。 

比如 需要 将 TextMenu 对 象 的 hideonclick 参 数 设置 为 true， 如 下 面 的 代码 所 示 。 


tb.adaG(({ 
text: 'menu', 
menu; new Ext menu ,Menu (({ 
items: [{ 
text: ' 文 本 '， 
xtype: ‘tbtext’, 
hideonClick: true 
}) 
}) 


这 时 候 就 需要 使 用 指定 xtype 的 方法 ， 同 时 在 参数 中 包含 hideonClick:true 的 内 容 。 





9.5.3 Ext .Toolbar.Spacer 
向 菜单 中 添加 空白 元 素 的 方式 有 如 下 几 种 。 
口 使 用 空格 字符 作为 参数 ， 如 下 面 的 代码 所 示 。 
tb.add(' '); 


口 使 用 包含 xtype: 'tbspacer' 属 性 的 对 象 作为 参数 ， 如 下 面 的 代码 所 示 。 


tb.addl(t{ 
xtype: 'tbspacer'’ 


口 使 用 Ext .Toolbar .Spacer 的 实例 作为 参数 ， 如 下 面 的 代码 所 示 。 


tb.add (new Ext .Toolbar .Spacer()): 


Ext .Toolbar .Spacer 是 一 个 宽度 为 2 px 的 空白 ， 只 用 来 分 隔 两 侧 的 工具 条 组 件 ， 并 没有 其 
他 复杂 的 用 法 。 需 要 时 直接 向 工具 条 中 添加 一 个 空格 ， 这 就 是 最 简单 的 方法 。 
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9.5.4 Ext .Toolbar.Separator 
Ext .Toolbar .Separator 显 示 为 一 条 竖 线 ， 用 于 分 隔 工 具 条 组 件 ， 效 





果 如 图 9-11 所 示 。 i 
向 菜单 中 添加 分 隔 符 元 素 的 方式 有 如 下 几 种 。 图 9-11 分隔 符 
9 使 用 连 字 符 或 'separator ' 作 为 参数 ， 如 下 面 的 代码 所 示 。 
tb.adaG('-'); 


tb.add!('separator’) 


D 使 用 包含 xtype: 'tbseparator' 属 性 的 对 象 作为 参数 ， 如 下 面 的 代码 所 示 。 


tb.adal({tf 
xtype: ''tbseparator ' 
J 


D 使 用 Ext .Toolbar .Separator 的 实例 作为 参数 ， 如 下 面 的 代码 所 示 。 


tb.add (new Ext.Toolbar.Separator ()); 


Ext .Toolbar .Separator 与 Ext .Toolbar .Spacer 相 似 ， 主 要 用 于 分 隔 工 具 条 中 的 组 件 ， 
没有 复杂 的 应 用 ， 需 要 时 可 以 直接 向 工具 条 中 添加 连 字 符 '-'。 


9.5.5 Ext .Toolbar .Fil1 


Ext .Toolbar.Fill 的 作用 是 将 处 于 它 右 侧 的 工具 条 组 件 以 右 对 齐 的 方式 排列 在 工具 条 右 
侧 (效果 如 图 9-12 所 示 )， 它 不 会 影响 它 左 侧 的 组 件 的 排列 位 置 。 
ee ED 


oe SG Le mid - Le 


图 9-12 ” 右 对 齐 标志 


图 9-12 显 示 的 是 在 组 件 中 间 使 用 Ext .Toolbar .Fi11 的 情况 ， 两 侧 的 组 件 分 别 显 示 在 工具 条 
的 两 侧 。 如 果 在 工具 条 开始 处 就 使 用 Ext .Toolbar .Fill1， 工 具 条 上 的 组 件 会 全 变 成 右 对 齐 。 

向 菜单 中 添加 分 隔 符 元 素 的 方式 有 如 下 几 种 。 

使 用 ' -> ' 作 为 参数 ， 如 下 面 的 代码 所 示 。 


tb ,aaQ( -> ); 


Q 使 用 包含 xtype: 'tbfil1' 属 性 的 对 象 作 为 参数 ， 如 下 面 的 代码 所 示 。 


tb.addlt 
RVDG: "th ' 
Ys 


O 使 用 Ext .Toolbar.Fil1 的 实例 作为 参数 ， 如 下 面 的 代码 所 示 。 
tb .add (new Ext.Toolbar.Fill()); 


Ext .Toolbar .Fil1 在 页 面 上 看 起 来 只 是 一 段 空白 ， 它 主要 的 功能 是 使 工具 条 上 的 组 件 右 对 
齐 ， 并 且 每 个 工具 条 上 只 有 第 一 个 Ext .Toolbar.Fil1 起 作用 。 即 使 在 工具 条 上 添加 了 多 个 
Ext .Toolbar.Fil1， 也 只 会 出 现 一 段 与 右 对 齐 对 应 的 空白 。 
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该 示例 在 09.menu/05-05.html 中 。 


9.5.6 Ext .SplitButton 


一 般 情况 下 , 无 论 是 按 下 菜单 本 身 还 是 按钮 旁边 的 黑色 小 三 角形 按钮 ， 都 会 弹出 对 应 的 子 菜 
单 。 为 了 提升 用 户 体 验 ， 我 们 可 能 会 实现 一 种 更 便捷 的 方法 ， 让 菜单 自动 记忆 上 次 选择 的 项 目 。 
下 次 再 单 击 这 个 菜单 时 , 不 会 弹出 下 拉 菜 单 让 用 户 选 择 , 而 是 直接 执行 与 上 次 选择 的 子 菜单 相对 
应 的 操作 。 

这 里 要 讲解 一 下 SplitButton， 它 也 称 为 MenuButton。 我 们 来 看 看 它 是 如 何 工 作 的 ， 如 代 


码 清 单 9-6 所 示 o 
代码 清单 9:6， SplitButtoen 的 王 作 党 捍 


Var menuButton = new Ext.SplitButton{{ 
text: ' 选 择 一 个 工具 '， 
handler: function() { 
if (menuButton .menu g&& ‘menuButton.menu.isVisible())}t{ 
menuButton.menu.show{this.el, menuButton.menuAlign}; 
} 
}， 
menu: { 
items: [ 
{text: ' 直线 ',，handler: line}， 
{text : ' 和 矩形 ',， handler: rect)， 
{text : ' 贺 形 ',， handler: circlel 


} 
于 


效果 如 图 9-13 所 示 。 时 





下 面 来 简单 分 析 一 下 上 面 实现 的 功能 。 寺 你 一 个 工具 ， 
(1) 先 构造 一 个 Ext .Toolbar .MenuButton， 它 本 身 有 两 种 状 | 直线 | 
态 : 单 击 按钮 会 执行 handler 函 数 ; 单 击 右边 的 那个 小 箭头 会 弹出 二 
菜单 。 | 
我 们 在 这 里 用 text 指 定 要 显示 的 文字 ， 使 用 menu 参 数 和 对 应 | 图形 | 
的 items 定 义 子 菜单 的 功能 。 


图 9-13 splitButton 


(2) 看 看 handler 函 数 中 执行 了 哪些 操作 。 刚 开始 时 ， 因 为 我 
们 什么 都 没有 选 ， 所 以 它 会 直接 弹出 menu 对 应 的 子 菜 单 。 一 旦 选择 了 某 个 子 菜单 ， 就 在 对 应 的 
菜单 项 中 修改 MenuButton 的 handler， 下 一 次 再 选择 它 时 就 会 直接 执行 最 后 一 次 执行 的 操作 。 
直线 对 应 的 handler 处 理 函数 如 下 面 代 的 码 所 示 。 


function line(} { 
menuButton.handler = line; 


menuButton.setText {' 直 线 '); 
Ext .Msg .alert(' 工 具 '，' 直线 '); 
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SplitButton 的 功能 很 有 趣 , 这 里 只 讲解 了 其 中 的 一 种 用 法 ,你 可 以 在 实际 开发 中 去 挖 据 它 
的 更 多 功能 。 完 整 代 码 如 下 所 示 : 


Var tb = new Ext.Toolbar!(); 
tb.render('toolbar'); 


function line() { 
menuButton.handler = line; 
menuButton.setText{' 直 线 '); 
Ext .Msg.alert(' 工 具 '，' 直 线 '); 
} 


function rect() I 
menuButton.handler = rect; 
menuButton .setText({( :矩形 ' )}; 
Ext.Msg.alezrt(' 工 具 '，' 和 矩形 ')， 

} 


function circle() { 
menuButton.handler = circle; 
menuButton .setText(' 圆 形 ' ) ; 
Ext .Msg.alert{' 工 具 '，' 阅 形 '); 
} 


Var menuButton = new Ext.SplitButtont{t{ 
text: ' 选 择 一 个 工具 '， 
handler: function(} { 
if{menuButton.menu && !menuButton.menu.isVisible{})}f 
menuButton.menu.show(this.el, menuButton.menuAlign),; 


{text: ' 直 线 ',， handler: line}， 
{text: ' 和 矩形 '，handler: rect}, 
{text: ' 圆 形 '，handler: circlel 


网， 


tb.add (menuButton); 
tb.doLayout (); 


示例 在 09.menu\05-06.html 中 。 


9.5.7 为 工具 条 添加 HTML 标签 


我 们 也 可 以 直接 在 工具 条 中 加 入 HTML 标 签 ， 包括 静 态 文本 、 图 片 、 输 入 框 和 按钮 等 ， 效 果 
如 图 9-14 所 示 。 





图 9-14 在 工具 条 中 加 入 HTML 
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th.add('<span style="color:red;font-weight:bold; "> 红字 </span>'); 
tb.add('<img src="user male.png" />'); 

tb.add('<input type="text">'); 

tb.add({'<button> 技 钮 </button>'); 


这 部 分 内 容 很 简单 ， 只 需要 把 对 应 的 HTML 片 段 通 过 adaqa( ) 函数 加 入 工具 条 中 即 可 。 我 们 还 
可 以 为 这 些 HTML 片段 设置 CSS 样 式 ， 从 而 控制 最 终 的 显示 效果 。 
该 示例 在 09.menu\05-07.html 中 。 


9.5.8 为 工具 条 添加 输入 控件 


EXT 还 支持 将 表单 的 输入 控件 添加 到 工具 条 中 。 无 论 是 Ext .form.TextField 形 式 的 直接 填 
写 文字 内 容 的 输入 杠 ， 还 是 Ext .form.DateField 形 式 的 下 拉 选 择 输入 框 ， 都 可 以 添加 到 工具 条 
中 ， 并 显示 ， 效 果 如 图 9-15 所 示 。 


图 9-15 为 工具 条 添加 输入 控件 


实现 方法 如 下 面 的 代码 所 示 : 


tb.add{ ' 文 本 框 : ') ; 

tb.add{new Ext.,form.TextFieldt{t{ 
name: “七 EX 

记忆 

tb.addat ' 日 期 框 : ' ); 

tb .add (new Ext ,form,DateField(1{ 
name: ‘date' 

}})3 


该 示例 在 09.menu\05-08.html 中 。 





9.6 分 页 工具 条 Ext .PagingToolbar 


Ext .PagingToolbar 继 承 自 Ext .Toolbar， 它 提供 了 一 套 标 准 的 分 页 组 件 ， 用 来 对 指定 的 
Ext .data.Store 进 行 分 页 操作 。 完 全 可 以 把 它 看 作 一 个 预 设 了 分 页 按钮 的 普通 工具 条 。 


9.6.1 Ext .PagingToolbar 的 基本 用 法 


我 们 在 第 3 章 讨 论 表 格 时 已 经 接触 过 Ext .PagingToolbar， 使 用 它 为 表格 提供 了 分 页 功能 。 
在 第 4 章 讨 论 ComboBox 时 ，Ext .PagingToolbar 也 用 来 为 ComboBox 提 供 分 页 功能 。 在 这 些 应 用 
中 ，Ext .PagingToolbar 都 作为 一 个 独立 的 组 件 存在 ， 并 没有 与 表格 或 ComboBox 紧 密 结合 ， 而 
是 通过 操作 Ext .data.Store 完 成 分 页 功能 。 

因此 ， 只 要 有 Ext .data.Store 存 在 ， 我 们 就 可 以 使 用 Ext .PagingToolbar 完 成 分 页 功能 。 
不 过 ， 手 工 显示 Ext .data.Store 中 的 数据 还 是 有 些 麻烦 。 所 以 ， 在 下 面 的 示例 中 〔 见 图 9-16)， 
我 们 先 以 Ext .griqd.GridPanel 作 为 显示 数据 的 容器 ， 介 绍 Ext .PagingToolbar 的 使 用 方式 。 
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Te 
| 


编号 名 称 攀 述 


1 name1 descn1 | 
2 name2 descn2 | 
3 name3 descn3 

”2 > 呈 示 1 33 闪 5 亲 | 


图 9-16 表格 中 的 分 页 工具 条 


让 我 们 来 看 一 下 Ext .PagingToolbar 中 包含 的 内 容 。 首 先是 左 侧 的 按钮 ， 分 别 代表 跳 转 到 
第 1 页 和 向 前 翻 一 页 。 因 为 目前 处 在 第 1 页 ， 所 以 这 两 个 按钮 都 是 灰色 的 ， 不 可 点 击 。 

后 面 是 提示 文字 和 一 个 <input type="text"> 输 入 框 ， 输 入 框 中 显示 的 是 当前 的 页 码 ， 你 
可 以 手工 输入 希望 跳 转 到 的 页 码 ， 敲 击 回 车 键 后 会 跳 转 到 对 应 的 页 面 。 

提示 文字 后 面 的 两 个 按钮 分 别 表 示 向 后 翻 页 和 跳 转 到 最 后 一 页 。 与 最 左 侧 的 两 个 按钮 类 似 ， 
如 果 当 前 是 最 后 一 页 ， 这 两 个 按钮 也 将 显示 成 灰色 ， 不 能 点 击 。 

最 后 面 的 是 一 个 刷新 按钮 ， 点 击 此 技 钮 会 执行 Ext .data.store 的 reload() 函数 ， 刷 新 
Ext .daata.Store 的 数据 。 在 Ext .data.Store 读 取 数 据 的 过 程 中 ， 这 个 图 标 还 会 有 动画 效果 ， 
提示 数据 正在 读 取 中 。 

最 后 是 右 对 齐 的 提示 文字 信息 ， 显 示 与 分 页 相关 的 一 些 信息 。 

示例 中 Ext .PagingToolbar 定 义 的 部 分 如 下 面 的 代码 所 示 。 

Var grid = new Ext .grid.GridPanel{t 

renderTo: ‘grid', 

autoHeight: true, 

store: store, 

2 Ext .PagingToolbar ({ 
PageSize: 3, 
store: store, 
displayInfo: true 


}) 
}¥ 


pageSize:3 表 示 每 页 最 多 显示 3 条 记录 ， 主 要 用 于 分 页 操作 的 内 部 计算 。 

Store 是 关键 参数 ，Ext . PagingToolbar 在 初始 化 时 会 把 自己 注册 到 store 中 ， 当 store 发 
生 1oad 事 件 时 ， 会 触发 相关 函数 对 Ext .PagingToolbar 执 行 更 新 等 操作 。Ext. PaingToolbar 
上 面 的 按钮 输入 框 触发 的 分 页 操作 也 会 直接 作用 在 store 上 。 

第 三 个 参数 负责 显示 工具 条 右 侧 的 提示 信息 ， 如 果 为 false 则 不 会 显示 这 些 提示 信息 。 

该 示例 在 09.menu\06-01.html 中 。 


9.6.2 向 Ext .PagingToolbar 添加 按钮 组 件 


虽然 Ext .PagingToolbar 上 的 按钮 已 经 很 多 了 ， 但 有 时 仍然 需要 在 上 面 添加 一 些 额 外 的 按 
钮 组 件 ， 比 如 对 表格 进行 添加 、 修 改 和 删除 等 操作 的 按钮 。 
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因为 Ext .PagingToolbar 继 承 了 Ext .Toolbar， 所 以 可 以 直接 使 用 items 参 数 为 工具 条 设 
署 自 定义 的 按钮 组 件 ， 如 代码 清单 9-7 所 示 。 


代码 清单 9-7 ”向 分 页 工具 条 中 添加 按 铀 组 御 


var grid = new Ext.grid.GridPanel ({ 
renderTo: ‘grid', 
autoHeight: true, 
store: store, 
cm: cm, 
bbar: new Ext.PagingToolbar({ 
pageSize: 3, 
store: store, 
GisplayInfo: true, 
items: ['—', { 
text: ' 添 加 '， 
pressed: true 


沁 沁 
text: ' 修 改 '， 


pressed: true 
text: “删除 ' ， 


pressed: true 


总 启 


添加 了 items 参 数 之 后 ， 分 页 工具 条 的 效果 如 图 9-17 所 示 。 





妨 号 名 和 糙 丧 寺 
1 narme1 descni1 
name2 descn2 
3 name3 descn3 
芮 六 买 失 2 页 > 训 诊 各 | 你 改 ”删除 显示 1-3. 次 5 条 


图 9-17 疝 分 页 工具 条 中 添加 按钮 


如 果 需 要 人 处理 这 3 个 按钮 的 点 击 事 件 ， 可 以 分 别 为 它们 设置 handler。 

不 仅仅 是 按钮 ， 之 前 讨论 过 的 工具 条 组 件 都 可 以 加 入 到 Ext .PagingToolbar 中 ， 它 们 也 会 
依照 这 种 顺序 显示 在 工具 条 中 。 但 请 正确 设置 各 组 件 的 大 小 ， 否则 很 容易 出 现 右 侧 的 提示 文字 与 
自 定义 组 件 重 登 的 问题 。 

该 示例 在 09.menu\06-02.html 中 。 


9.7 右键 弹出 菜单 


在 EXT 中 ， 可 以 为 用 户 定义 一 个 功能 菜单 ， 在 用 户 单 击 鼠 标 右 键 时 ,代替 浏 览 器 提供 的 系统 
功能 菜单 。 
这 种 自 定义 的 右键 功能 菜单 也 是 通过 Ext .menu .Menu 实 现 的。 首先 定义 一 个 多 级 菜单 ， 在 


Download at Pin5i.Com 


256 第 9 章 工具 条 和 菜单 


它 里 面 准备 好 我 们 需要 的 各 种 功能 ， 如 代码 清单 9-8 所 示 。 


代码 清单 9-8 ”右键 弹出 菜单 


Var menul = new Ext.menu.Menult 


items: [ 


{text: 
{text: 
{text : 


Var menu2 = new Ext.menu.Menult 


items: [ 


{text: 
{text: 
{text: 


}}; 


Var menu3 = new Ext .menu.Menult{ 


items: [ 


{text: 
{text: 
{text: 


) ) ; 


Var menu4d = new Ext.menu .Menu (1 


items: [ 


{text: 
{text: 
{text: 


})3 


Var contextmenu = new ExXt .menu .Menu(1{ 


items: [{ 
text: 
menu: 


text: 
menu: 


text: 
menu: 


text: 
menu: 
}] 
上 站 


与 上 面 示例 不 同 的 是 , 这 里 创建 好 的 菜单 并 没有 添加 到 Ext 
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新 新 一 ' } ， 
:新 新 二 ' ) ， 
' 新 新 三 ' } ， 


' 删 删 一 '}， 
' 删 删 二 ' }， 
' 删 删 三 ' ) ， 


' 改 改 一 '})， 
' 改 改 二 '})， 
“ 臣 恋 三 辐 5 


' 显 显 一 ' } ， 
' 显 显 二 ' ) ， 
' 显 显 三 '}， 


' 新 建 '， 


menul 


' 修 改 ' ， 


menu2 


' 删 除 ' ， 


menu3 


menu4 
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为 contextmenu 的 菜单 下 。 因 为 没有 确定 泻 染 的 位 置 ， 所 以 在 页 面 上 是 看 不 到 这 些 菜单 的 ,效果 
如 图 9-18 所 示 。 





图 9-18 ”右键 弹出 菜单 
下 面 为 页 面 添加 监听 事件 。 当 用 户 单 击 右键 时 弹出 上 面 定 义 好 的 功能 菜单 ， 实 现 过 程 如 下 所 


Ext .gec (document) .on('contextmenu’', functiont{e) { 
e.preventDefault(); 
contextmenu.showAt (e.getxY()):; 

})3 


首先 获得 aocument 对 象 ， 这 是 页 面 中 代表 文档 的 实例 ， 监 听 它 的 contextmenu 事 件 ， 可 以 
获得 用 户 在 浏览 器 上 任意 位 置 单 击 鼠标 右键 的 事件 。 

监听 函数 时 我 们 主要 做 两 项 工作 ， 首 先 执 行 e.preventDefault()， 取 消 浏览 器 对 此 事件 的 
默认 操作 ， 和 否则， 用 户 单 击 右键 后 还 会 弹出 浏览 器 的 系统 菜单 ， 同 时 显示 两 个 菜单 会 扰乱 用 户 的 
视线 。 其 次 ， 获 得 鼠标 当前 的 坐标 位 置 ， 调 用 contextmenu 的 showat ( ) 函数 ， 在 鼠标 的 当前 位 
置 上 显示 我 们 定义 好 的 功能 菜单 。 

这 里 使 用 的 是 普通 的 Ext .menu .Menu 类 ， 大 家 可 以 在 菜单 上 添加 更 多 的 组 件 ， 制 作出 功能 
更 复杂 的 右键 菜单 。 

该 示例 在 09.menu\07.html 中 。 





注意 EXT 3x 中 对 Button 和 Menu 进 行 了 大 幅度 加 强 。 从 EXT 3x 开 始 我 们 可 以 设置 大 、 中 、 小 3 种 
形式 的 按钮 ， 同 时 也 可 以 在 按钮 和 菜单 中 实现 图 文 混 排 的 效果 ， 具 体 实例 可 以 参考 第 14 章 . 


9.8 小结 


本 章 主 要 介绍 了 如 何 创建 工具 条 和 菜单 , 以 及 如 何 使 用 下 拉 菜 单 和 分 级 菜单 对 我 们 需要 的 功 
能 按钮 进行 分 组 显示 。 除 此 之 外 ， 本 章 详 细 讲 解 了 与 工具 条 相关 的 各 种 控件 ， 包 括 Button、 
TextMenu、Spacer、Separator、Fill、SplitButton， 并 介绍 了 它们 各 自 的 配置 方法 和 使 用 情况 。 同 
时 ， 还 演示 了 如 何在 工具 条 上 增加 HTML 标 签 和 表单 控件 。 最 后 ， 本 章 讨 论 了 Ext . 
PagingToolbar 的 使 用 方法 和 如 何 配 置 右键 弹出 菜单 。 
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本 章 内 容 

0 Ext .data 命 名 空间 下 常用 组 件 简介 
DQ Ext .data.Connection 

口 Ext .data.Record 

D Ext.data.Store 

口 常用 proxy 

口 常用 Reader 

口 高 级 store 

D EXT 中 的 Ajax 

日 关于 scope 和 和 createDelegate 1() 
D DWR 与 EXT 整 合 

口 localXHR 支 持 本 地 使 用 Ajax 


10.1 Ext .data 命名 空间 下 常用 组 件 简介 


Ext .data 在 命名 空间 中 定义 了 一 系列 store、reader 和 proxy。 表 格 和 ComboBox 都 是 以 
Ext .data 为 媒介 获取 数据 的 ， 它 包含 异步 加 载 、 类 型 转换 、 分 页 等 功能 。Ext .data 默 认 支持 
Array、JSON、XML 等 数据 格式 ， 可 以 通过 Memory、HTTP、ScriptTag 等 方式 获得 这 些 格式 的 数 
据 。 如 果 要 实现 新 的 协议 和 新 的 数据 结构 ， 只 需要 扩展 reader 和 proxy 即 可 。DWRProxy 就 实现 
了 自身 的 proxy 和 reader， 让 EXT 可 以 直接 从 DWR 获 得 数据 。 


10.2 Ext .data.Connection 


Ext .data.Connection 是 对 Ext .1ib.Ajax 的 封装 , 它 提 供 了 配置 使 用 Ajax 的 通用 方式 , 在 
内 部 通过 Ext .1ib.Ajax 实 现 与 后 台 的 异步 调用 。 与 底层 的 Ext .1ib.Ajax 相 比 ，Ext .data. 
Connection 提 供 了 更 简洁 的 配置 方式 ， 使 用 起 来 更 方便 。 

Ext .data.Connection 主 要 用 于 在 Ext .data.HttpProxy 和 Ext .data.ScriptTagProxy 
中 执行 与 后 台 交 互 的 任务 ， 它 会 从 指定 的 URL 获 得 数据 ， 并 把 后 台 返 回 的 数据 交 给 HttpProxy 或 
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ScriptTagProxy 处 理 。Ext .data .Connection 的 使 用 方式 如 代码 清单 10-1 所 示 。 
代码 清单 10-1 ”使 用 Ext .data.Connection 


Var conn = new Ext .data.Connectionl{ 
autoAbort: false, 
defaultHeaders: { 
referer: ‘http://localhost:8080/' 
}s 
disableCaching : false, 
extraParams : { 
name: ‘name' 
}, 
method : 'GET'， 
timeout : 300, 
url OR 


在 使 用 Ext .data.Connection 之 前 ， 都 要 像 上 面 这 样 创建 一 个 新 的 Ext .Connection 实 例 。 
可 以 在 构造 方法 里 配置 对 应 的 参数 ,比如 autoAbort 表 示 链 接 是 否 会 自动 断 开 、defaultHeaders 
参数 表示 请 求 的 默认 首部 信息 、aisablecaching 参 数 表示 请 求 是 否 会 禁用 缓存 、extraparams 
参数 代表 请 求 的 额外 参数 、method 参 数 表示 请 求 方法 、timeout 参 数 表 示 连 接 的 超时 时 间 、url 
参数 表示 请 求 访问 的 网 址 等 。 

在 创建 了 conn 之 后 ， 可 以 调用 request () 函数 发 送 请 求 ， 处 理 返回 的 结果 ， 如 下 面 的 代码 
所 示 : 


conn ,zedquest ({ 
success: function(response) ({ 
Ext .Msg.alert (‘info', response.responseText):; 
上 
failure: function{() { 
Ext .Msg.alert{'warn', '‘'failure'); 
} 
$93 


Request () 函数 中 可 以 设置 success 和 failure 两 个 回调 函数 ， 分 别 在 请 求 成 功 和 请 求 失败 
时 调用 。 请 求 成 功 时 ，success 函 数 的 参数 就 是 后 台 返 回 的 信息 。 

下 面 来 看 一 下 request 函 数 中 的 其 他 参数 。 

DO url:String: 请 求 url。 

D params :Object/String/Function: 请 求 传递 的 参数 。 

D method:String: 请 求 方法 ， 通 常 为 GET 或 PosT。 

O callback:Function: 请 求 完成 后 的 回调 函数 ， 无 论 是 成 功 还 是 失败 ， 都 会 执行 。 
success:Function: 请 求 成 功 时 的 回调 函数 。 
failure:Function: 请 求 失败 时 的 回调 函数 
scope:object: 回调 函数 的 作用 域 。 
form:Object/String: 缆 定 的 表单 。 
isUpload:Boolean: 是 否 执行 文件 上 传 。 





OOOO OO 
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口 headers:0bject: 请 求 首部 信息 。 

D xmlpata:Object: XML 文 档 对 象 ， 可 以 通过 URL 附 加 参数 的 方式 发 起 请 求 。 

口 disableCaching:Boolean: 是 否 禁用 缓存 ， 默 认为 禁用 。 

Ext .daata.Connection 还 提供 了 abort ( [Number transactionIa] ) 函 数 ， 当 同时 有 多 个 
请 求 发 生 时 ， 根 据 指 定 的 事务 id 放弃 其 中 的 某 一 个 请 求 。 如 果 不 指 定 事务 ia， 就 会 放弃 最 后 一 
个 请 求 。isLoading ( [Number transactionId] ) 函 数 的 用 法 与 abort () 类似 ， 可 以 根据 事务 ia 
判断 对 应 的 请 求 是 否 完成 。 如 果 未 指定 事务 ida， 就 判断 最 后 一 个 请 求 是 否 完成 。 

该 示例 在 10.store/02.html 中 。 


10.3 Ext .daata.Record 


Ext .Gata.Record 就 是 一 个 设 定 了 内 部 数据 类 型 的 对 象 , 它 是 Ext .data.Store 的 最 基本 组 
成 部 分 。 如 果 把 Ext .data.store 看 作 是 一 张 二 维 表 ， 那 么 它 的 每 一 行 就 对 应 一 个 Ext .data. 
Record 实 例 。 

Ext .data.Recorad 的 主要 功能 是 保存 数据 ， 并 且 在 内 部 数据 发 生 改 变 时 记录 修改 的 状态 ， 
它 还 可 以 保留 修改 之 前 的 原始 值 。 

使 用 Ext .data .Record 时 通常 都 是 由 create1{) 函数 开始 的 , 首先 用 create() 函数 创建 一 个 
自 定义 的 Record 类 型 ， 如 下 面 的 代码 所 示 : 


Var PersonRecord = Ext.data.Record,.createl(ll 
{name: 'name’, type: 'string'}, 
{name: ‘sex', type: ‘'int'} 

]13 


PersonRecord 就 是 我 们 定义 的 新 类 型 , 包含 字符 串 类 型 的 name 和 整数 类 型 的 sex 两 个 属性 ， 
然后 使 用 new 关 键 字 创建 PersonRecord 的 实例 ， 如 下 面 的 代码 所 示 ; 


Var boy = new PersonRecord1( 


el 

创建 对 象 时 ， 可 以 直接 通过 构造 方法 为 对 象 赋予 初始 值 ， 将 'boy ' 赋值 给 name，0 赋 值 给 
sex。 

现在 ， 我 们 得 到 了 PersonRecord 的 实例 boy。 如 何 才能 得 到 它 的 属性 呢 ? 以 下 3 种 方式 都 可 
以 获得 boy 中 name 属 性 的 数据 ， 如 下 面 的 代码 所 示 : 


alert (boy.data.name):; 
alert (boy.data['name']); 
alert (boy.get('name')); 


这 里 涉及 Ext .data.Record 的 data 属 性 ， 这 是 定义 在 Ext .data.Record 中 的 一 个 公共 属 
性 ， 用 于 保存 当前 record 对 象 的 所 有 数据 。 它 是 一 个 JSON 对 象 ， 可 以 直接 从 它 里 面 获得 需要 的 
数据 。 可 以 通过 Ext .data .Record 的 get () 函数 方便 地 从 data 属 性 中 获得 指定 的 属性 值 。 

如 果 需 要 修改 boy 中 的 数据 ， 请 不 要 使 用 以 下 方式 直接 操作 aata， 如 下 面 的 代码 所 示 : 
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boy.data.name = 'boy name'; 

boy.datal 'name'] = ‘boy name'; 

而 应 该 使 用 set () 函数 ， 如 下 面 的 代码 所 示 : 
boy.set{('name', ‘body name'); 


set () 函数 会 判断 属性 值 是 否 发 生 了 改变 ， 如 果 改 变 了 ， 就 要 将 当前 对 和 象 的 Girty 属 性 设置 
为 true， 并 将 修改 之 前 的 原始 值 放 入 modified 对 象 中 ， 供 其 他 函数 使 用 。 如 果 直 接 操 作 data 中 
的 值 ，record 就 无 法 记录 属性 数据 的 修改 情况 。 
在 Record 的 属性 数据 被 修改 后 ， 可 以 执行 如 下 几 种 操作 。 
口 commit () (提交 ) : 这 个 函数 的 效果 是 设置 dirty 为 false， 并 删除 modified 中 保存 的 
原始 数据 。 
D reject () (撤销) : 这 个 函数 的 效果 是 将 data 中 已 经 修改 了 的 属性 值 都 恢复 成 modified 
中 保存 的 原始 数据 ， 然 后 将 Qirty 设 置 为 Ealse， 并 删除 保存 原始 数据 的 modified 对 象 。 
口 getchanges{) (获得 修改 的 部 分 ) : 这 个 函数 会 把 Gata 中 经 过 修改 的 属性 和 数据 放 在 一 
个 JSON 对 象 里 并 返回 。 例如 上 例 中 , getCchanges () 返回 的 结果 是 (name: 'body name'})。 
D 还 可 以 调用 isModifiea() 判 断 当 前 *ecorda 中 的 数据 是 否 被 修改 。 
Ext .data.Record 还 提供 了 用 于 复制 record 实 例 的 函数 copy ()。 


var CopyBoy = boy.copy!{); 
这 样 就 得 到 了 boy 的 一 个 副本 , 它 里 面包 含 了 boy 的 data 数 据 , 但 copy () 函数 不 会 复制 dirty 
和 modified 等 额外 的 属性 值 。 
Ext .data.Record 中 其 他 的 参数 大 多 与 Bxt .data.Store 有 关 ， 请 参考 与 Ext .data.Store 
相关 的 讨论 。 
该 示例 在 10.store/03.html 中 。 


10.4 Ext.data.Store 


Ext .data.Store 是 EXT 中 用 来 进行 数据 交换 和 数据 交互 的 标准 中 间 件 ， 无 论 是 表格 还 是 
ComboBox， 都 是 通过 它 实现 数据 读 取 、 类 型 转换 、 排 序 分 页 和 搜索 等 操作 的 。 

Ext .data.Store 中 有 一 个 Ext.data.Record 数 组 ， 所 有 数据 都 存放 在 这 些 Ext .data. 
Record 实 例 中 ， 为 后 面 的 读 取 和 修改 操作 做 准备 。 


10.4.1 基本 应 用 
在 使 用 之 前 ， 首 先 要 创建 一 个 Ext .data .Store 的 实例 ， 如 下 面 的 代码 所 示 : 





var data = [ 
[LPDoy';: 下] 
("yirl's 1] 


}s 


Var store = new Ext.data.Sstorelt{ 
proxy: new Ext .data.MemoryProxy (data), 
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reader: new Ext.data.ArrayReader({}, PersonRecord) 
六 让， 
store.load!(); 


每 个 store 最 少 需要 两 个 组 件 的 支持 ， 分 别 是 proxy 和 reader，proxy 用 于 从 菜 个 途径 读 取 
原始 数据 ，reader 用 于 将 原始 数据 转换 成 Record 实 例 。 

这 里 使 用 的 是 Ext .data .MemoryProxy 和 Ext .data.ArrayReader， 将 data 数 组 中 的 数据 
转换 成 对 应 的 几 个 PersonRecord 实 例 ， 然 后 放 入 store 中 。store 创 建 完 毕 之 后 ， 执 行 
store.1oad() 实 现 这 个 转换 过 程 。 

经 过 转换 之 后 ，store 里 的 数据 就 可 以 提供 给 表格 或 ComboBox 使 用 了 ， 这 就 是 Ext .data. 
Store 的 最 基本 用 法 。 代 码 如 下 所 示 : 


var grid = new Ext.grid.GridPanel(t{ 
store: store, 
columns: [ 
{header: 'name', dataIndex: ‘name'}, 
{header: 'sex', datalInex: 'sex')} 
】， 
autoHeight: true, 
renderTo: 'grid' 
站 


该 示例 在 10.store/04-01.html 中 。 


10.4.2 ”对 数据 进行 排序 


Ext .data.Store 提 供 了 一 系列 属性 和 函数 ， 可 以 利用 它们 对 数据 进行 排序 操作 。 
可 以 在 创建 Ext .data.store 时 使 用 sortInfo 参 数 指定 排序 的 字段 和 排序 方式 , 如 下 面 的 代 
码 所 示 : 
Var Store = new EXL.data.Store (1{ 
Proxy: new Ext.data.MemoryProxy (data), 
reader: new Ext.data.ArrayReader ({}, PersonRecord), 


sortIinfo; {field: 'name', direction: 'DESC'} 
4 


这 样 ， 在 store 加 载 数据 之 后 ， 就 会 自动 根据 name 字 段 进行 降序 排列 。 对 store 使 用 
store.setDefaultSort ('name', 'DESC' ) ;也 会 达到 同样 效果 。 也 可 以 在 任何 时 候 调 用 sort () 
函数 ， 比 如 store.sort('name'，'DESC');， 对 store 中 的 数据 进行 排序 。 

如 果 我 们 希望 获得 store 的 排序 信息 ， 可 以 调用 getsortstate() 函数 ， 返 回 的 是 类 似 
{field: "name"，direction: " DESC"} 的 JSON 对 象 。 

与 排序 相关 的 参数 还 有 remotesort ， 这 个 参数 是 用 来 实现 后 台 排序 功能 的 。 当 设 置 为 
remoteSort:true 有 时 ，store 会 在 向 后 台 请 求 数据 时 自动 加 入 sort 和 air 两 个 参数 ， 分 别 对 应 排 
序 的 字段 和 排序 的 方式 ， 由 后 台 获 取 并 处 理 这 两 个 参数 ， 在 后 台 对 所 需 数据 进行 排序 操作 。 
remoteSort :true 也 会 导致 每 次 执行 sort () 时 都 要 去 后 台 重新 加 载 数据 ， 而 不 能 只 对 本 地 数据 
进行 排序 。 
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该 示例 在 10.store/04-02.html 中 。 


10.4.3 从 store 中 获取 数据 


从 store 中 获取 数据 有 很 多 种 途径 ， 可 以 依据 不 同 的 要 求 选 择 不 同 的 函数 。 最 直接 的 方法 是 
根据 record 在 store 中 的 行 号 获得 对 应 的 record， 得 到 了 record 就 可 以 使 用 get () 函数 获得 里 
面 的 数据 了 ， 如 下 面 的 代码 所 示 : 

store.getAt (0) .get('name') 

通过 这 种 方式 , 可 以 遍历 store 中 所 有 的 record, 依次 得 到 它们 的 数据 , 如 下 面 的 代码 所 示 : 


for (var i = 0; i < store.getCount{(); i++) { 
var record = store.getaAt (1i); 
alert (record.get('name')); 

} 


Store.getCount () 返 回 的 是 score 中 的 所 有 数据 记录 ， 然 后 使 用 for 循 环 遍历 整个 store， 
从 而 得 到 每 条 记录 。 
除了 使 用 getcount () 的 方法 外 ， 还 可 以 使 用 each () 函数 ， 如 下 面 的 代码 所 示 ; 


store.each{function(record) { 
alert (record.get!{'name')); 


六 加 


each() 可 以 接受 一 个 函数 作为 参数 ， 遍 历 内 部 record， 并 将 每 个 record 作 为 参数 传递 给 
function{) 处 理 。 如 果 想 停止 遍历 ， 可 以 让 function() 返 回 false。 
也 可 以 使 用 getRange() 函数 连续 获得 多 个 record， 只 需要 指定 开始 和 结束 位 置 的 索引 值 ， 
如 下 面 的 代码 所 示 : 
Var records = store.getRange(0, 1}); 
for (var i = 0; i < records.length; i++) { 
var record = records[i]; 


alert (record.get{'name')); 
} 


如 果 确 实 不 知道 recora 的 ia， 也 可 以 根据 record 本 身 的 id 从 store 中 获得 对 应 的 record， 
如 下 面 的 代码 所 示 : 
store.getById(1001) .get('name') 


EXT 还 提供 了 函数 fina() 和 fingBy()， 可 以 利用 它们 对 store 中 的 数据 进行 搜索 ， 如 下 面 
的 代码 所 示 : 


find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], 
[Boolean caseSensitivel] ) 


在 这 5 个 参数 中 ， 只 有 前 两 个 是 必须 的 。 第 一 个 参数 property 代 表 搜 索 的 字段 名 ; 第 二 个 参 
数 value 是 匹配 用 字符 串 或 正则 表达 式 ， 第 三 个 参数 startIndaex 表 示 从 第 几 行 开始 搜索 ， 第 四 
个 参数 anyMatch 为 true 时 ， 不 必 从 头 开 始 匹 配 ; 第 五 个 参数 caseSensitive 为 Erue 时 ， 会 区 分 
大 小 写 。 
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如 下 面 的 代码 所 示 : 


var index = store.find!{!'name','g'); 
alert (store.getaAt (index) .get ('name')); 


与 fina{) 函 数 对 应 的 findBy () 函数 的 定义 格式 如 下 : 
findBy{( Function fn, [Object scope], [Number startIindex] ) : Number 


findaBy() 函数 允许 用 户 使 用 自 定义 函数 对 内 部 数据 进行 搜索 。fn 返 回 true 时 ， 表 示 查 找 成 
功 ， 于 是 停止 遍历 并 返回 行 号 。fn 返 回 false 时 ， 表 示 查 找 失 败 〈 即 未 找到 ) ， 继 续 遍 历 ， 如 下 


面 的 代码 所 示 : 
index = Store.findBy{(Efunction(record，id) { 
return record.get('name') == 'gir1l' && record.get('sex') == 1; 


Dy 
alert (store.getAt {index) .get ('name'))}: 


使 用 finaBy() 函数 可 以 同时 判断 record 中 的 多 个 字段 ， 在 函数 中 实现 复杂 逻辑 。 
我 们 还 可 以 使 用 gauery 和 aueryBy 函 数 对 store 中 的 数据 进行 查询 。 与 find 和 findBy 不 同 的 
是 ， query 和 queryBy 返 回 的 是 一 个 Mixcollection 对 象 ， 里 面包 含 了 搜索 得 到 的 数据 ， 如 下 面 


的 代码 所 示 : 
alert{store,.query('name', 'boy')); 
alert (store.queryBy (function(record) { 


return record.get('name') == ‘girl' && record.get{('sex') == 1 
EE? 


该 示例 在 10 .store/04-01.htmli 中 。 


10.4.4 更 新 store 中 的 数据 


可 以 使 用 ada (Ext .data.Record[] records) 向 store 末 尾 添加 一 个 或 多 个 record, 使 用 
的 参数 可 以 是 一 个 record 实 例 ， 如 下 面 的 代码 所 示 : 


store.add (new PersonRecoral{{ 
name: 'other', 
sex: 0 

汪汪 


add() 也 可 以 添加 一 个 xecord 数 组 ， 如 下 面 的 代码 所 示 ; 


store.add( [new PersonRecoradlt 
name: ‘otherl', 
sex: 0 
}}, new PersonRecordt{{ 
name: 'other2°', 
sex: 0 
同居 这 


adqd() 函数 每 次 都 会 将 新 数据 添加 到 store 的 末尾 ， 这 就 有 可 能 破坏 store 原 有 的 排序 方式 。 
如 果 希 望 根据 store 原 来 的 排序 方式 将 新 数据 插入 到 对 应 的 位 置 ， 可 以 使 用 adasorted() 函数 。 
它 会 在 添加 新 数据 之 后 立即 对 store 进 行 排序 ， 这 样 就 可 以 保证 store 中 的 数据 有 序 地 显示 ， 如 
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下 面 的 代码 所 示 : 


store.addSorted(new PersonRecordl{t{ 
name: '1ili', 
sex: 1 

J 


store 会 根据 排序 信息 查找 这 条 record 应 该 插入 的 索引 位 置 , 然后 根据 得 到 的 索引 位 置 插入 
数据 ， 从 而 实现 对 整体 进行 排序 。 这 个 函数 需要 预先 为 store 设 置 本 地 排序 ， 否 则 会 不 起 作用 。 

如 果 希 望 自己 指定 数据 插入 的 索引 位 置 ， 可 以 使 用 insert () 函数 。 它 的 第 一 个 参数 表示 插 
入 数据 的 索引 位 置 ， 可 以 使 用 record 实 例 或 recora 实 例 的 数组 作为 参数 ， 插 入 之 后 ， 后 面 的 数 
据 自动 后 移 ， 如 下 面 的 代码 所 示 : 


store.insert(3, new PersonRecoralt 
name: 'other', 


区 局， 


store.insert(3, [new PersonRecordl(t{ 
name: 'otherl', 
sex: 0 
}}, new PersonRecoradl{ 
name: “Other2 ' ， 
sex: 0 
}})1); 


删除 操作 可 以 使 用 remove () 和 removeaA11() 函数 ， 它 们 分 别 可 以 删除 指定 的 recora 和 清空 
整个 store 中 的 数据 ， 如 下 面 的 代码 所 示 : 


store.remove {store.getAt (0)):; 
store.removeAll {); 


store 中 没有 专门 提供 修改 某 一 行 record 的 操作 ， 我 们 需要 先 从 store 中 获取 一 个 record。 
对 这 个 record 内 部 数据 的 修改 会 直接 反映 到 store 上 ， 如 下 面 的 代码 所 示 : 

store.getAt (0) .set('name', 'xxxx'); 

修改 record 的 内 部 数据 之 后 有 两 种 选择 : 执行 rejectchanges () 撤销 所 有 修改 ， 将 修改 过 
的 record 恢 复 到 原来 的 状态 ; 执行 commitchanges () 提交 数据 修改 。 在 执行 撤销 和 提交 操作 之 
前 ， 可 以 使 用 getModifiedRecords () 获得 store 中 修改 过 的 record 数 组 。 

与 修改 数据 相关 的 参数 是 pruneModifiedRecords， 如 果 将 它 设置 为 true， 那 么 在 每 次 执 
行 删除 或 reload 操 作 时 ， 都 会 清空 所 有 修改 。 这 样 ， 在 每 次 执行 删除 或 reload 操 作 之 后 ， 
getModifiedRecords() 返 回 的 就 是 一 个 空 数组 ， 否 则 仍然 会 得 到 上 次 修改 过 的 record 记 录 。 


10.4.5 ”加 载 及 显示 数据 


store 创 建 好 后 ， 需 要 调用 1oad() 函数 加 载 数据 ， 加 载 成 功 后 才能 对 store 中 的 数据 进行 操 
作 。1loada() 调用 的 完整 过 程 如 下 面 的 代码 所 示 ; 


Score .loadG({ 
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params: {start:0,limit:20}, 

callback: function(records, options, success})t{ 
Ext .Msg .alert ('info', ' 加 载 完 毕 '); 

ys 

scope: store, 
add: true 

电网 - 


D params 是 在 store 加 载 时 发 送 的 附加 参数 。 

DO callback 是 加 载 完 毕 时 执行 的 回调 函数 ， 它 包含 3 个 参数 : records 表 示 获 得 的 数据 ， 

options 表 示 执 行 ]oad() 时 传递 的 参数 ，success 表 示 是 否 加 载 成 功 。 

口 scope 用 来 指定 回调 函数 执行 时 的 作用 域 。 

DO add 为 true 时 , 10ad() 得 到 的 数据 会 添加 在 原来 的 store 数 据 的 末尾 , 否则 会 先 清除 之 前 

的 数据 ， 再 将 得 到 的 数据 添加 到 store 中 。 

一 般 来 说 , 为 了 对 store 中 的 数据 进行 初始 化 ,1oad() 函数 只 需要 执行 一 次 。 如果 用 params 
参数 指定 了 需要 使 用 的 参数 ， 以 后 再 次 执行 reload() 重 新 加 载 数据 时 ，store 会 自动 使 用 上 次 
load{() 中 包含 的 params 参 数 内 容 。 

如 果 有 一 些 需 要 固定 传递 的 参数 ， 也 可 以 使 用 baseParams 参 数 执行 ， 它 是 一 个 JSON 对 象 ， 
里 面 的 数据 会 作为 参数 发 送 给 后 台 处 理 ， 如 下 面 的 代码 所 示 :; 


store.baseParams.start = 0; 
store.baseParams,limit = 20; 


为 store 加 载 数据 之 后 ， 有 时 不 需要 把 所 有 数据 都 显示 出 来 ， 这 时 可 以 使 用 函数 filter 和 
filterBy 对 store 中 的 数据 进行 过 滤 ， 只 显示 符合 条 件 的 部 分 ， 如 下 面 的 代码 所 示 : 


filter( String field, String/RegExp value, [Boolean anyMatch}, 
[Boolean caseSensitive] ) : void 


filter () 函数 的 用 法 与 之 前 谈 到 的 finad{) 相 似 ， 如 下 面 的 代码 所 示 : 


store.filter('name', 'boy'):; 


对 应 的 filterBy () 与 findBy () 类 似 , 也 可 以 在 自 定义 的 函数 中 实现 各 种 复杂 判断 ， 如 下 面 
的 代码 所 示 : 


store,.filterBy (function(record) ( 
return record.get('name’) == '‘'girl' && record.get('sex') == 1; 
}); 


如 果 想 取消 过 滤 并 显示 所 有 数据 ， 那 么 可 以 调用 clearFilter() 函数 ， 如 下 面 的 代码 所 示 : 


store.clearFilter!(): 


如 果 想 知道 score 上 是 否 设置 了 过 滤器 ， 可 以 通过 isFiltered() 函数 进行 判断 。 


10.4.6 ”其 他 功能 
除了 上 面 提 到 的 数据 获取 、 排 序 、 更 新 、 显 示 等 功能 外 ，store 还 提供 了 其 他 一 些 功能 函数 。 
collect( String dataTndex，[Boolean allowNull], [Boolean bypassFilter] ) : Array 
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collect 函 数 获得 指定 的 dataIndex 对 应 的 那 一 列 的 数据 。 当 allowNu11 参 数 为 true 时 ， 返 
回 的 结果 中 可 能 会 包含 nul1、undefined 或 空 字符 串 ， 否 则 collect 函 数 会 自动 将 这 些 空 数据 过 
滤 掉 。 当 bypassFilter 参 数 为 true 时 ，collect 的 结果 不 会 受 查询 条 件 的 影响 ， 无 论 查 询 条 件 
是 什么 都 会 忽略 掉 ， 返 回 的 信息 是 所 有 的 数据 ， 如 下 面 的 代码 所 示 : 

alert (store.collect ('name')); 

这 样 会 获得 所 有 name 列 的 值 ， 示 例 中 返回 的 是 包含 了 'boy' 和 'girl' 的 数组 。 

getTotalCount () 用 于 在 翻 页 时 获得 后 台 传 递 过 来 的 数据 总 数 。 如 果 没 有 设置 翻 页 ， 
getTotalCount () 的 结果 与 getcount {) 相同， 都 是 返回 当前 的 数据 总 数 ， 如 下 面 的 代码 所 示 : 


alert{store.getTotalCount ( ) ) : 


indexOf (Ext .data.Record record) 和 indexofId(String id) 函数 根据 record 或 
record 的 ia 获 得 record 对 应 的 行 号 ， 如 下 和 面 的 代码 所 示 : 


alert (store.indexOof (store.getAt (1))):; 
alert (store.indexOofId{1001)); 


loadData (object data，[Boolean append] ) 从 本 地 JavaScript 变 量 中 读 取 数据 ，appenda 
为 true 时 ， 就 会 将 读 取 的 新 数据 附加 到 store 中 原 有 的 数据 后 面 ， 否 则 就 会 执行 整体 更 新 ， 如 下 
面 的 代码 所 示 : 


store.loadDatal(data, true); 


Sum(String property, Number start, Number end) :Number 用 于 计算 某 一 个 列 从 start 
到 end 的 总 和 ， 如 下 面 的 代码 所 示 : 


alert{lstore.sum('sex')); 


如 果 省 略 参 数 start 和 end， 就 计算 全 部 数据 的 总 和 。 
store 还 提供 了 一 系列 事件 《 见 表 10-1)， 让 我 们 可 以 为 对 应 操作 设 定 操作 函数 。 


表 10-1 store 提 供 的 事件 
事 件 名 参 数 


add ( Store this, Ext.data.Record[] records, Number index ) 

beforelaod ( Store this, Object options ) 

clear ( Store this ) 

datachanged ( Store this ) 

load ( Store this, Ext.data.Recordl{[] records, Object options ) 

loadexception () 

metachange ( Store this, Object meta. ) 

remove ( Store this, Ext.data.Record record, Number index ) 

update { Store this, Ext.data.Record record, String operation ) 

至 此 ，store 和 record 等 组 件 已 经 讲解 完毕 。 下 面 主要 讨论 一 下 常用 的 proxy 和 reader 

组 件 。 
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10.5 常用 proxy 


本 节 将 介绍 一 些 常 用 的 proxy， 这些 proxy 的 作用 是 通过 内 存 ，HTTP 等 不 同 的 媒介 获取 原始 
数据 ， 然 后 将 获取 的 数据 交 给 对 应 的 读 取 器 进行 处 理 。 


10.5.1 MemoryProxy 


MemoryProxy 只 能 从 JavaScript 对 象 获 得 数据 ， 可 以 直接 把 数组 ， 或 JSON 和 XML 格式 的 数据 
交 给 它 处 理 ， 如 下 面 的 代码 所 示 ; 


Var proxy = new EXt ,Gata.MemoryProxy ( [ 
[ial' ，'namel'，'descn1'] ， 
['id2', 'name2','descn2'] 

]73 


10.5.2 HttpProxy 


HttpProxy 使 用 HTTP 协 议 ， 通 过 Ajax 去 后 台 取 数据 ， 构 造 它 时 需要 设置 url : 'yxocx .jsp' 参 
数 。 这 里 的 ur1 可 以 替换 成 任何 一 个 合法 的 网 址 ， 这 样 HttpProxy 才 知道 去 哪里 获取 数据 ， 如 下 
面 的 代码 所 示 : 


Var proxy = new Ext.data.HttpProxy ({url:'xxx.jsp'}); 


后 台 需 要 返回 EXT 所 和 需要 的 JSON 格 式 的 数据 。 下 面 的 内 容 就 是 后 台 使 用 JSP 的 一 个 范例 ， 如 
下 面 的 代码 所 示 : 
response.setContentType("application/x-json"); 
Writer out = response.getWriter{); 
out,.print("[" + 
"['id1','namel', 'descnl’']" + 
"['id2','name2','descn2']" + 
请 注意 ， 这 里 的 HttpProxy 不 支持 跨 域 ， 它 只 能 从 同一 域 中 获得 数据 。 如 果 想 跨 域 ， 请 参考 
下 面 的 ScriptTagProxy。 


10.5.3 scriptTagProxy 
ScriptTagProxy 的 用 法 几乎 和 HttpProxy - 样 ， 如 下 面 的 代码 所 示 : 


Var proxy = new Ext.data.ScriptTagProxy!{ (url: 'xxx.jsp'}); 


从 这 里 也 看 不 出 来 它 是 如 何 支持 跨 域 的 , 我 们 还 需要 在 后 台 进 行 相应 的 处 理 ,如 下 面 的 代码 
所 示 : 


String cb = request.getParameter{'callback"):; 
response.setContentTypel"text/javascript"):; 
Writer out = response.getWriter ():; 
out.write(ch + "("); 

Out .print("[*" + 
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nn "+ 
"['id2','name2', 'descn2']" + 
i 隐 - 
out .write(");"); 


其 中 的 关键 就 在 于 从 请 求 中 获得 的 callback 参 数 ， 这 个 参数 叫做 回调 函数 。 
ScriptTagProxy 会 在 当前 的 HTML 页 面 里 添加 一 个 <script type="text/javascript"src= 
"cxx.jsp"> </script> 标 签 ， 然 后 把 后 台 返 回 的 内 容 添加 到 这 个 标签 中 ， 这 样 就 可 以 解决 跨 域 
访问 数据 的 问题 。 为 了 让 后 台 返 回 的 内 容 可 以 在 动态 生成 的 标签 中 运行 ，EXT 会 生成 一 个 名 为 
callback 的 回调 函数 ,并 把 回调 函数 的 名 称 传递 给 后 台 , 由 后 台 生 成 callback(daata) 形 式 的 响 
应 内 容 ， 然 后 返回 给 前 台 自 动 运行 。 

虽然 上 述 处 理 过 程 比 较 难 理解 ， 但 是 我 们 只 需要 了 解 ScriptTagProxy 的 用 法 就 足够 了 。 如 
果 还 想 进一步 了 解 ScriptTagProxy 的 运行 过 程 ， 可 以 使 用 Firebug 查 看 动态 生成 的 HTML 以 及 
响应 的 JSON 内 容 。 

最 后 我 们 来 分 析 一 下 EXT 的 API 文 档 中 提供 的 示例 ， 这 段 后 台 代码 会 自动 判断 请 求 的 类 型 ， 
返回 支持 ScriptTagProxy 或 HttpProxy 的 数据 ， 如 代码 清单 10-2 所 示 。 


代码 清单 10-2 在 后 人 台 同 时 支持 HttpProxy 和 scriptTagProxy 


boolean scriptTag = false; 
String cb = request .getParameter ("callback'); 
Tr ols 1 Wii: 4 
scriptTag = true; 
response.setContentType("text/javascript"); 
} else { 
response.setContentType ("application/x-json"); 
} 
Writer out = response.getWriter(); 
if (scriptTag) { 
out .writefcb + "("); 
} 
out.print (dataBlock.toJsonstring ()); 
if (scriptTag) { 
Out .write(");"); 





} 


代码 中 通过 判断 请 求 中 是 否 包 含 callback 参 数 来 决定 返回 何 种 数据 类 型 。 如 果 包 含 ， 就 返 
回 ScriptTagProxy 需 要 的 数据 ; 否则， 就 当 作 HttpProxy 处 理 。 


10.6 常用 Reader 


本 节 介 绍 常用 的 数据 读 取 器 ， 这 些 读 取 器 的 作用 是 将 数组 、JSON 等 格式 的 原始 数据 转换 为 
EXT 中 所 需要 的 通用 数据 类 型 。 


10.6.1 ArrayReader 
从 proxy 中 读 取 的 数据 需要 进行 解析 ， 这 些 数据 转换 成 Record 数 组 后 才能 提供 给 
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Ext .data.Store 使 用 。 

RArrayReader 的 作用 是 从 二 维 数 组 里 依次 读 取 数据 ， 然 后 生成 对 应 的 Record。 默 认 情 况 下 
是 按 列 顺序 读 取 数 组 中 的 数据 。 不 过 你 也 可 以 考虑 用 mapping 指 定 record 与 原始 数组 对 应 的 列 
号 。ArrayReader 的 用 法 很 简单 , 但 缺点 是 不 支持 分 页 。 使 用 二 维 数 组 的 方式 如 下 面 的 代码 所 示 : 


Var data = [ 
['idl', 'namel', 'descni'], 
['id2', ‘name2', 'descn2'] 


}; 
对 应 的 ArrayReader 如 下 面 的 代码 所 示 : 


Var reader = new Ext.data,ArrayReader(t{ 
id:1 

F350 
{name: ‘name' ,mapping:1)}), 
{name: 'descn' ,mapping:2}, 
{name: 'id' ,mapping:0}, 

jy 


我 们 演示 的 是 字段 顺序 不 一 致 的 情况 ， 如 果 字 段 顺 序 和 列 顺序 一 致 ， 就 不 用 额外 配置 


mapping。 


10.6.2 JsonReader 


在 JavaScript 中 ，JSON 是 一 种 非常 重要 的 数据 格式 ，key :value 的 形式 比 XML 那 种 复杂 的 标 
签 结构 更 容易 理解 ， 代 码 量 也 更 小 ， 很 多 人 倾向 于 使 用 它 作 为 EXT 的 数据 交换 格式 。 为 
JsonReader 准 备 的 JSON 数 据 如 下 面 的 代码 所 示 ; 


var data = { 
id:0, 
totalProperty:2, 
successProperty:true, 
root:[ 
{id:'idil',name: 'namel',descn: 'descnl'}, 
{id:'id2',name: 'name2',descn: 'descn2'} 
] 
上 上; 


与 数组 相 比 ，JSON 的 最 大 优点 就 是 支持 分 页 ， 我 们 可 以 使 用 totalProperty 参 数 表 示 数 据 
的 总 量 。successProperty 参 数 是 可 选 的 ， 可 以 用 它 判 断 当前 请 求 是 否 执 行 成 功 ， 进 而 判断 是 
否 进行 数据 加 载 。 在 不 希望 JsonReader 处 理 响 应 数据 时 ， 可 以 把 successProperty 设 置 成 
false。 

现在 来 讨论 一 下 JsonReader, 看 看 它 是 如 何 与 上 面 的 JSON 数 据 对 应 的 , 如 下 面 的 代码 所 示 : 


Var reader = new Ext.data.JsonReader (1 
successProperty: "successproperty", 
totalProperty: “totalProperty", 
TOOELS "Poot®"., 
ta? de 
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{name: 'id',mapping: 'id'}, 

{name: 'name' ,mapping: 'name'}, 

{name: 'descn' ,mapping: 'descn'} 
] 


上 例 中 的 对 应 方式 不 够 简洁 ， 因 为 name 和 mapping 部 分 的 内 容 是 相同 的 。 其 实 这 里 的 
mapping 可 以 省 略 ， 默 认 会 用 name 参 数 从 JSON 中 获得 对 应 的 数据 。 如 果 不 想 与 JSON 里 的 名 字 一 
样 ， 也 可 以 使 用 mapping 修 改 。 不 过 ，mapping 在 这 里 还 有 其 他 用 途 ， 如 代码 清单 10-3 所 示 。 


代码 清 半 10-3”， 为 JsonReader 设 置 mapping 进 行 数据 映射 


var data = { 
id:0, 
totalProperty:2, 
successProperty:true, 
root:![ 
{id: 'idi' ,name: 'namel',descn: 'descnl',person:t 
id:1,name: 'man',sex: 'male’ 
}}, 
{id:'id2',name: 'name2',descn: 'descn2' ,person:t 
id:2,name: ‘woman', sex: 'female' 
}} 
] 


Var reader = new Ext.data.JsonReader!({ 
successProperty: "successproperty", 
totalPproperty: "totalProperty", 
root: "root", 
ids “dr" 

'id', 'name', 'descn', 
{name: ‘person_name' ,mapping: 'person.name'}, 


{name: 'person._sex' ,mapping: 'person.sex'} 


I 


在 上 面 的 代码 中 , 我 们 使 用 JSON 支 持 更 复杂 的 嵌 套 结构 , 其 中 的 person 对 象 自身 就 拥有 id、 
name 和 sex 等 属性 。 在 JsonReader 中 可 以 用 mapping 把 这 些 髓 套 的 内 部 属性 映射 出 来 ， 赋 予 对 
应 的 record， 而 其 他 字段 都 不 变 。 


10.6.3 xmlReader 
XML 是 非常 通用 的 数据 传输 格式 ，xmLReader 使 用 的 XML 格式 的 数据 如 代码 清单 10-4 所 示 。 


代码 清单 10-4 xmlReadez 使 用 的 XML 格式 的 数据 


< ?xml version="1.0" encoding="utf-8"?> 
<dataset> 
<id>l</id> 
<totalRecords>2</totalRecords> 
<Ssuccess>true</success> 
<record> 
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<id>1</id> 
<name>namel</name> 
<descn>descnl</,descn> 

</record> 

<record> 
<id>2</id> 
<name>name2</name> 
<Gescn>descn2</descn> 

</record> 

</dataset> 


这 里 一 定 要 用 aataset 作 为 XML 根 元 素 。 再 让 我 们 看 一 下 如 何 对 xmlReader 进 行 配置 ， 从 而 
读 取 上 面 示例 中 的 XML 数 据 ， 如 下 面 的 代码 所 示 : 


Var reader = new Ext.data.XmlReader ({ 
totalRecords: ‘totalRecords', 
SUCCesSs: "SUCCeSS 
record: '‘'record', 

id: "id" 
}, {'id', 'name','descn']); 


XmlReader 使 用 的 参数 与 之 前 介绍 的 JsonReader 有 些 不 同 ， 我 们 可 以 看 到 这 里 用 到 了 
totalRecords 和 record 两 个 参数 ， 其 中 totalRecords 用 来 指定 从 'totalRecords' 标 签 里 获 
得 后 台数 据 总 数 ， record 则 表示 XML 中 放 在 record 标 签 里 的 数据 是 我 们 需要 显示 的 结果 数据 。 
其 他 两 个 参数 success 和 id 的 含义 和 JsonReader 中 对 应 的 参数 相似 ， 分 别 用 来 判断 操作 是 否 成 
功 和 这 次 返回 的 ia。 因 为 XML 中 的 标签 和 reaqer 里 需要 的 名 字 是 相同 的 ， 所 以 简化 了 配置 ， 将 
[fname: 'id'}, {name:'name'}, {name:'descn'}] 直 接 写 成 了 ['id','name','descn']。 

因为 xmlReader 不 能 将 JavaScript 中 的 字符 串 自动 解析 成 XML 格 式 的 数据 ， 所 以 需要 利用 其 
他 方法 进行 演示 。 参 考 localxHR.js 中 构造 XML 的 方式 ， 我 们 有 了 下 面 的 解决 方案 ， 如 代码 清 
单 10-5 所 示 。 


代码 清单 10.25， 通 过 本 地 字符 串 构造 XML 对 象 


Var data = "<?xml version='1.0' encoding='utf-8'?>" + 
"<dataset>" + 
"<id>l</id>" + 
"<totalRecords>2</totalRecords>" + 
"<success>true</success>" + 
"<record>" + 
"<id>]</id>" + 
"<name>namel</name>" + 
"<descn>descnl</descn>" + 
"</record>" + 
"<record>" + 
"<id>2</id>" + 
"<name>name2</name>" + 
"<descn>descn2</descn>" + 
"</record>" + 
"</dataset>"; 


Download at Pin5i.Com 


http://52pdf.taobao.com 


10.7 高 级 store 273 


Var xdoc; 


if (typeof (DOMParser) == 'undefined')({ 
xdoc = new ActiveXObject ("Microsoft .XMLDOM" ) ; 
xdoc.async="false"; 
xdoc.loadxML (data); 

}elset 
Var domParser = new DOMParser ( ) ; 
xdoc = domParser.parseFromString(data, ‘'application/xml'); 
domParser = null; 


var proxy = new Ext .data.MemoryProxy (xdoc},; 


Var reader = new Ext.data.XxmlReadert{{ 
totalRecords: '‘'totalRecords', 
Success: ‘success', 
record: 'recorad', 

+ BE Ke 

ys ['id'y'name' ,'descn’']); 

var ds = new Ext .data.SsStorel(lt{ 
Proxy: proxy, 


reader: reader 
汪汪 


10.7 高 级 store 


实际 开发 时 ， 并 不 需要 每 次 都 对 proxy、reader、store 这 3 个 对 象 进行 配置 ，EXT 提 供 了 
几 种 可 选择 的 整合 方案 。 


OD SimplLleStore = Store+ MemoryProxy + ArrayReader 


var ds = Ext.data.SimpleStorelt 
data: [ 


['idil', 'namel', 'descnl'}), 
['id2', 'name2','descn2°'] 
下 
fields: [id' narme'，'dqescn'+ ] 
ie 


SimpleStore 是 专 为 简化 读 取 本 地 数组 而 设计 的 ， 设 置 好 MemoryProxy 沉 要 的 data 和 
ArrayReader 需 要 的 fields 就 可 以 使 用 了 。 


口 JsonStore= SLore 十 HttpProxy + JsonReader 
Var ds = Ext.data.JsonStorel(t{ 
Url: xxV aD', 
天 Of 下 工 OOE 
fields: ['id', 'name','descn'] 
ee 
JsonStore 将 JsonReader 和 HttpProxy 整 合 在 一 起 , 提供 了 一 种 从 后 台 读 取 JSON 信 息 的 
简便 方法 ， 大 多 数 情况 下 可 以 考虑 直接 使 用 它 从 后 台 读 取 数 据 。 
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口 Ext .data.GroupingStore 可 以 对 数据 进行 分 组 。 
Ext .data.GroupingStore 继 承 自 Ext .aata.Store, 它 的 主要 功能 是 可 以 对 内 部 的 数据 
进行 分 组 。 可 以 在 创建 Ext .data.GroupingStore 时 指定 根据 某 个 字段 进行 分 组 ， 也 可 
以 在 创建 实例 后 调用 它 的 groupBy () 函数 对 内 部 数据 重新 分 组 ， 如 下 面 的 代码 所 示 : 


var ds = new Ext.data.GroupingStorelt 
data: [ 

"dl1' 'namel','female', 'descnl'], 

id2','name2', 'male','descn2'], 

id3', 'name3', 'female', 'descn3'], 

id4', 'name4', ‘male', 'descn4'], 

'id5', ‘name5', 'female', 'descn5'] 


人 
三 “和 苍 王 汪 _. 曾 


]， 
reader: new Ext.data.ArrayReader{t{ 
fields: ['id', 'name','sex', 'descn'] 
Ey 
groupField: 'sex', 
groupOnSsort: true 
小 让 


上 例 中 ， 我 们 使 用 groupFiela 作 为 参数 ， 为 Ext .data.Grouping 设 置 了 分 组 字段 ， 另 外 还 
设置 了 grouponsort 参数， 这 个 参数 可 以 保证 只 有 在 进行 分 组 时 才 会 对 Ext.data. 
GroupingStore 内 部 的 数据 进行 排序 。 如 果 采 用 默认 值 ， 就 需要 手工 指定 sortInfo 参 数 ， 从 而 
指定 默认 的 排序 字段 和 排序 方式 ， 否 则 就 会 出 现 错误 。 

创建 Ext .data .GroupingSstore 的 实例 之 后 ， 我 们 还 可 以 调用 groupBy () 函数 重新 对 数据 进 
行 分 组 。 因 为 设置 了 grouponsort:true， 所 以 在 重新 分 组 时 ，EXT 会 使 用 分 组 的 字段 对 内 部 数 
据 进 行 排序 。 如 果 不 想 对 数据 进行 分 组 ， 也 可 以 调用 clearGrouping{) 函数 清除 分 组 信息 ， 如 
下 面 的 代码 所 示 : 


ds.groupBy('id'); 
ds.clearGrouping!(); 


该 示例 在 10.store/07.html 中 。 


10.8 ”EXT 中 的 Ajax 


EXT 与 后 台 交 换 数 据 时 ， 很 大 程度 上 依赖 于 底层 实现 的 Ajax。 所 谓 底层 实现 ， 就 是 说 很 可 能 
就 是 我 们 之 前 提 到 的 Prototype、jQuery 或 YUI 中 提供 的 Ajax 功能 。 为 了 统一 接口 ，EXT 在 它们 的 
基础 上 进行 了 封装 ， 让 我 们 可 以 用 同一 种 写法 “ 游 走 ”于 各 种 不 同 的 底层 实现 之 间 。 


10.8.1 最 容易 看 到 的 Ext .Ajax 
Ext .Ajax 的 基本 用 法 如 下 所 示 ; 


Ext .Ajax.request (1 
UDC 和 二 
success: function(response) { 
Ext .Msg .alert (' 成 功 '， response.responseText); 
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}y 
failure: function(response) { 

Ext .Msg .alert (' 失 败 ',， response,.responseText); 
},， 
params: { name: 'Value' } 
人 


这 里 调用 的 是 Ext .Ajax 的 request 函 数 ， 它 的 参数 是 一 个 JSON 对 象 ， 具 体 如 下 所 示 。 

Dur1 参 数 表示 将 要 访问 的 后 台 网 址 。 

D success 参数 表示 响应 成 功 后 的 回调 函数 。 

上 例 中 我 们 直接 从 response 取 得 返回 的 字符 串 ， 用 Ext.Msg.alert 显 示 出 来 。 

D failure 参 数 表 示 响 应 失败 后 的 回调 函数 。 

注意 ， 这 里 的 响应 失败 并 不 是 指数 据 库 操作 之 类 的 业务 性 失败 ， 而 是 指 HTTP 返 回 404 或 500 
错误 ， 请 不 要 把 HTTP 响 应 错误 与 业务 错误 混淆 在 一 起 。 

Q params 参 数 表示 请 求 时 发 送 到 后 台 的 参数 ， 既 可 以 使 用 JSON 对 象 ， 也 可 以 直接 使 用 

"name=value" 形 式 的 字符 串 。 

上 面 的 示例 可 以 在 10.store/08-01.html 中 找到 。 

Ext .Ajax 直接 继承 自 Ext .data.Connection， 只 不 过 它 是 一 个 单 例 ， 不 需要 用 new 创 建 实 
例 ， 可 以 直接 使 用 。 在 使 用 Ext.data.connection 前 需要 先 创建 实例 ， 因 为 Ext .data. 
Connection 是 为 了 给 Ext .data 中 的 各 种 proxy 提 供 Ajax 功 能 ， 分 配 不 同 的 实例 更 有 利于 分 别管 
理 。Ext .Ajax 为 用 户 提 供 了 一 个 简易 的 调用 接口 ， 实 际 使 用 时 ， 可 以 根据 自己 的 需要 进行 选择 。 


10.8.2 ”Ext .1ib.Ajax 是 更 底层 的 封装 


其 实 Ext .Ajax 和 Ext .data.connection 的 内 部 功能 实现 都 是 依靠 Ext .1ib.Ajax 来 完成 
的 ， 在 Ext .1ib.Ajax 下 面 就 是 各 种 底层 库 的 Ajax 了 。 
如 果 使 用 Ext .1ib.Ajax 实 现 以 上 的 功能 ， 就 需要 写成 下 面 的 形式 ， 如 下 面 的 代码 所 示 : 


Ext .1ib.Ajax.request ( 
SO 
'07-01txt', 
{success: function(response){ 
Ext .Msg .alert (' 成 功 ',， response.responseText); 
},failure: function{)t{ 
Ext .Msg .alert1{' 失 败 '， response.responseText); 
}}, 
'data=’' + encodeURIComponent (Ext .encode{ {name: 'value'}))} 





1s 
我 们 可 以 看 到 ， 使 用 Ext .1ib.Ajax 时 需要 传递 4 个 参数 ， 分 别 为 nethod、url、callback 
和 params。 它 们 的 含义 与 Ext .Ajax 中 的 参数 都 是 一 一 对 应 的 ， 唯一 没有 提 到 过 的 method 参 数 表 
示 请 求 HTTP 的 方法 ， 它 也 可 以 在 Ext .Ajax 中 使 用 method: ' PosT' 的 方式 设置 。 
相对 于 Ext .Ajax 来 说 ，Ext .1ib.Ajax 有 如 下 几 个 缺点 。 
D 参数 的 顺序 被 定 死 了 ， 第 一 个 参数 是 method， 第 二 个 参数 是 ur1， 第 三 个 参数 是 回调 函 
数 callback， 第 四 个 参数 是 params。 这 样 既 不 容易 记忆 ， 也 无 法 省 略 其 中 某 个 不 需要 的 
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参数 。Ext .Ajax 中 用 JSON 对 象 来 定义 参数 ， 使 用 起 来 更 灵活 。 
D 在 params 部 分 ，Ext .1ib.Ajax 必 须 使 用 字符 串 形式 ， 显 得 有 些 笨重 。Ext .Ajax 则 可 以 
在 JSON 对 象 和 字符 串 之 间 随 意 选择 ， 非 常 灵 活 。 
比 与 Ext .Ajax 相 比 ，Ext .1ib.Ajax 的 唯一 优势 就 是 它 可 以 在 EXT 1.x 中 使 用 。 如 果 你 使 用 
的 是 EXT 2.0 或 更 高 的 版 本 ， 那 么 就 放心 大 胆 地 使 用 Ext .Ajax 吧 ， 它 会 带 给 你 更 多 的 惊喜 。 
该 示例 在 10.store/08-02.html 中 。 


10.9 关于 scope 和 createDelegate() 


JavaScript 中 this 的 使 用 是 一 个 由 来 已 入 的 问题 了 。 这 里 就 不 介绍 它 的 发 展 历 史 了 ， 只 结合 
具体 的 例子 ， 告 诉 大 家 可 能 会 遇 到 什么 问题 ， 及 遇 到 这 些 问题 时 EXT 是 如 何 解 决 的 。 在 使 用 EXT 
时 ， 最 常 碰 到 的 就 是 使 用 Ajax 回调 函数 时 出 现 的 问题 ， 如 下 面 的 代码 所 示 。 


<input type="text" name="text" id="text"> 
<input type="button" name="button" id="button" value="button"> 


现在 的 HTML 页 面 中 有 一 个 text 输 入 框 和 一 个 按钮 我们 希望 按 下 这 个 按钮 之 后 , 能 用 Ajax 
去 后 台 读 取 数 据 ， 然 后 把 后 台 响 应 的 数据 放 到 text 中 ， 实 现 过 程 如 代码 清单 10-6 所 示 。 


代码 清单 10:6 ”Ajax 中 使 用 回调 函数 
function doSuccess (response) 1 


text .dom.value = TeSsponse .reSsponseTexXt ; 
} 


Ext .onReady (function()t 
Ext.get{'button') .on('click', function()I{ 

Var text = Ext.gett{'text'); 

Ext.1lib.Ajax.request( 
"POST', 
"08.txt', 
{success:doSuccess}, 
‘param=' + encodeURIComponent (text.dom.value) 


ps 

Eh 

在 上 面 的 代码 中 ，Ajax 已 经 用 Ext .get('text') 获 得 了 text， 以 为 后 面 可 以 直接 使 用 ， 没 
想到 回调 函数 success 不 会 按照 你 写 的 顺序 去 执行 。 当 然 ， 也 不 会 像 你 所 想 的 那样 使 用 局 部 变量 
text。 实 际 上 ， 如 果 什 么 都 不 做 ， 只 使 用 回调 函数 ， 你 不 得 不 再 次 使 用 Ext .get (' text ' ) 重新 
获得 元 素 ， 和 否则 浏览 器 就 会 报 text 未 定义 的 错误 。 

在 此 使 用 Ext .get ('text') 重 新 获取 对 和 象 还 比较 简单 ， 在 有 些 情况 下 不 容易 获得 需要 处 理 
的 对 象 ， 我 们 要 在 发 送 Ajax 请 求 之 前 获取 回调 函数 中 需要 操作 的 对 象 ， 有 两 种 方法 可 供 选 择 : 
scope 和 createDelegate。 

口 为 Ajax 设 置 scope。 
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function doSuccess{response) { 
this.dom.value = response.responseText; 
} 
Ext .lib.Ajax.request( 
* POST ) 
I 
{success:doSuccess, scope:text}, 
‘param=' + encodeURIComponent (text.dom.value) 

) 

在 Ajax 的 callback 参 数 部 分 添加 一 个 scope:text， 把 回调 函数 的 scope 指 向 text， 它 的 
作用 就 是 把 dosuccess 函 数 里 的 this 指 向 text 对 象 。 然 后 再 把 dosuccess 里 改 成 
this .dom.value, 这 样 就 可 以 了 .如果 想 再 次 在 回调 函数 里 用 某 个 对 象 , 必须 配 上 scope， 
这 样 就 能 在 回调 函数 中 使 用 this 对 它 进行 操作 了 。 

口 为 success 添 加 createDelegate()。 


function GoSuccess (response) | 
this.dom.value = response.responseText; 


} 


Ext .lib.Ajax.reqaquest ( 
"POST', 
a 
{success:doSuccess.createDelegate (text)}, 
'param=' + encodeURIComponent (上 ext .dom.value) 
);? 


createDelegate 只 能 在 function 上 调用 ， 它 把 函数 里 的 this 强 行 指向 需要 的 对 象 ， 然 后 
我 们 就 可 以 在 回调 函数 aosuccess 里 直接 通过 this 来 引用 createDelegate{) 中 指定 的 这 个 对 
象 了 。 它 可 以 作为 解决 this 问 题 的 一 个 备 选 方案 。 

建议 大 家 尽量 选择 scope 来 控制 JavaScript 的 作用 域 ， 因 为 createDelegate 是 要 对 原来 的 函 
数 进 行 封装 ， 重 新 生成 function 对 象 。 简 单 环 境 下 ，scope 就 够 用 了 ， 倒 是 createDpelegate 还 
有 其 他 功能 ， 比 如 修改 调用 参数 等 。 

示例 在 10.store/08.html 中 。 


10.10 ”DWR 与 EXT 整合 


据 不 完全 统计 ， 从 事 Ajax 开发 的 Java 程 序 员 有 一 大 半 都 使 用 DWR。 下 面 我 们 来 介绍 一 下 如 何 
在 EXT 中 使 用 DWR 与 后 台 交 互 。 


10.10.1 在 EXT 中 直接 使 用 DWR 


因为 DWR 在 前 台 的 表现 形式 和 普通 的 JavaScript 完 全 一 样 , 所 以 我 们 不 需要 特地 去 做 些 什么 ， 
直接 使 用 EXT 调 用 DWR 生 成 的 JavaScript 函 数 即 可 。 以 表格 为 例 ， 比 如 现在 我 们 要 显示 一 个 通讯 
录 的 信息 , 后 台 记 录 的 数据 有 id、name、sex、email、tel、addTime 和 descn。 编写 对 应 的 POJO， 
代码 如 下 所 示 : 


public class Info { 
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long id; 
String name; 
int sex; 
String email,; 
String tel; 
Date addTime; 
String descn; 
} 


然后 编写 操作 POJO 的 manager 类 ， 代 码 如 下 所 示 : 


public class InfoManager { 
private List infoList = new ArrayList():; 


public List getResult () { 
return infobList; 
} 
} 


代码 部 分 有 些 删 减 ， 我 们 只 保留 了 其 中 的 关键 部 分 ， 就 这 样 把 这 两 个 类 配置 到 dwr.xml 中 ， 
让 前 台 可 以 对 这 些 类 进行 调用 。 

下 面 是 EXT 与 DWR 交 互 的 关键 部 分 ， 我 们 要 对 JavaScript 部 分 做 如 下 修改 ， 如 代码 清单 10-7 
所 示 。 


代码 清单 10-7 ”使 用 EXT 调 用 DWR 


Var cm = new Ext .grid.ColumnModel{(! 
{header:' 编 号 ' ,dataIndex:'id'}， 
{header: ' 名 称 ' ,dataIndex: 'name'}，, 
{header: ' 性 别 ' ,dataIndex: 'sex'}，, 
{header: ' 邮 箱 ' ,dataTIndex:'email' )}， 
{header : ' 电 话 ' dataInaex:'tel'}， 
{header : ' 添 加 时 间 ' ,dataIndex: 'addTime'}， 
{header: ' 备 注 ',dataIndex: 'descn'} 

Tk 


Var Store = new Ext.data.JsonSstorel(t 
fields: ["id","name",'"sex",''email','tel', 'addTime', 'descn'] 
Fs 


// 调用 DWR 取 得 数据 

infoManager .getResult (function(data) { 
store.loadData (data); 

})? 


Var grid = new Ext.grid.GridPanel({ 
renderTo: 'grid', 
store: store, 
cm: cm 

轴 记 | 


注意 ， 执 行 infoManager .getResult () 函数 时 ，DWR 就 会 使 用 Ajax 去 后 台 取 数据 了 ， 操 作 
成 功 后 调用 我 们 定义 的 匿名 回调 函数 。 在 这 里 我 们 只 做 一 件 事 ， 那 就 是 将 返回 的 data 直 接 注入 


Download at Pin5i.Com 


http://52pdf.taobao.com 


10.10 DWR 与 EXT 整合 279 


到 ds 中 。 
DWR 返 回 的 data 可 以 被 Jsonstore 直 接 读 取 ， 我 们 需要 设置 对 应 的 fields 参 数 ， 告 i 
JsonReader 需 要 哪些 属性 。 


在 这 里 ，EXT 和 DWR 两 者 之 间 没 有 任何 关系 ， 将 它们 任何 一 方 替换 掉 都 可 以 。 实 际 上 它们 
只 是 在 一 起 运行 ， 并 没有 整合 。 我 们 给 出 的 这 个 示例 也 是 说 明了 一 种 松 耦 合 的 可 能 性 ， 实 际 操作 
中 完全 可 以 使 用 这 种 方式 。 


10.10.2 DWRProxy 


要 结合 使 用 EXT 和 DWR， 不 需要 对 后 台 程 序 进行 任何 修改 ， 可 以 直接 让 前 后 台数 据 进行 交 
互 。 不 过 还 要 考虑 很 多 细节 ， 比 如 表格 分 页 、 刷 新 、 排 序 、 搜 索 等 常见 的 操作 。EXT 的 官方 网 站 
上 已 经 有 人 放 上 了 pwRProxy， 借 助 它 可 以 让 DWR 和 EXT 连 接 得 更 加 紧密 。 不 过 ， 需 要 在 后 台 添 
加 DWRProxy 所 需要 的 Java 类 ， 这 可 能 不 是 最 好 的 解决 方案 。 但 我 们 相信 ， 通 过 对 它 的 内 在 实现 
的 讨论 ， 我 们 可 以 有 更 多 的 选择 和 想象 空间 。 


注意 ”这 个 DWRProxy.js 一 定 要 放 在 ext-base.js 和 ext-all.js 后 面 ， 否 则 会 出 错 。 


我 们 现在 就 用 DWRProxy 来 实现 一 个 分 页 的 示例 。 除 了 准备 好 插件 DWRProxy.js 外 ， 还 要 在 后 
台 准 备 一 个 专门 用 于 分 页 的 封装 类 .因为 不 仅 要 告诉 前 台 显 示 哪 些 数据 ， 还 要 告诉 前 台 一 共有 多 
少 条 数据 。 现 在 我 们 来 重点 看 一 下 ListRange.java， 如 下 面 的 代码 所 示 : 


Public class ListRange { 
Object [] data; 
int totalSjize; 

} 


其 实 ListRange 非 常 简 单 ， 只 有 两 个 属性 ， 提供 数 据 的 aata 和 提供 数据 总 量 的 totalsize。 
再 看 一 下 InfoManager .java。 为 了 实现 分 页 ， 我 们 专门 编写 了 一 个 getItems 方 法 ， 代 码 如 下 
所 示 : 


public ListRange getILtems (Map conditions) { 
int start = 0; 
int pageSize = 10; 
int pageNo = (start / pageSize) + 1; 


try ‘ 
start = Integer.parseInt (conditions.get{"start") .toString() ); 
pageSize = Integer.parseInt(conditions.get ("limit") .toSstring()); 
pageNo = {start / pageSize) + 1; 

} catch (Exception ex) 1{ 
ex.printSstackTrace (); 

} 

List list = infoList.subList(start, start + pageSize); 

return new ListRange(list.toArray (), infoList.size{)),; 

} 


getItems () 的 参数 是 Map， 我 们 从 中 获得 需要 的 参数 ， 比 如 start 和 1imit。 不 过 HTTP 里 
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的 参数 都 是 字符 串 ， 而 我 们 需要 的 是 数字 ， 所 以 要 对 类 型 进行 相应 的 转换 。 根 据 start 和 1imit 
两 个 属性 从 全 部 数据 中 截取 一 部 分 ， 放 进 新 建 的 ListRange 中 ， 然后 把 生成 的 ListRange 返 回 给 
前 台 ， 十 是 一 切 都 解决 了 。 

重头 戏 要 上 演 了 ， 我 们 就 要 使 用 传说 中 的 Ext.data.DWRProxy 了 ， 还 有 Ext.data. 
ListRangeReader。 通 过 这 两 个 扩展 ，EXT 完 全 可 以 支持 DWR 的 数据 传输 协议 。 实 际 上 ， 这 正 
是 EXT 要 把 数据 和 显示 分 离 设计 的 原因 ,这样 你 只 需要 添加 自 定义 的 proxy 和 reader, 不 需要 修 
改 EXT 的 其 他 部 分 ， 就 可 以 实现 从 特定 途径 获取 数据 的 功能 。 后 台 还 是 DWR， 所 以 至 少 在 表格 
部 分 ， 我 们 可 以 很 好 地 使 用 它们 的 结合 ， 主 要 代码 如 下 所 示 : 


Var Store = new Ext.data.Storel(t{ 
proxy: new Ext.data.DWRProxy (infoManager .getIitems, true), 
reader: new Ext.data.ListRangeReader{({ 
totalProperty: '‘'totalSize', 
root: 'data', 
1a: -Ed 
} nfo) 
remoteSort: true 
Es 


与 前 面 讲述 的 一 样 ， 我 们 修改 了 proxy， 也 修改 了 reader， 其 他 地 方 都 不 需要 进行 修改 ， 表 
格 已 经 可 以 正常 运行 了 ,需要 提醒 的 是 DWRProxy 的 用 法 , 其 中 包 插 两 个 参数 : 第 一 个 是 dwrcall， 
它 把 一 个 DWR 函 数 放 进去 ， 它 对 应 的 是 后 台 的 getItems 方 法 ; 第 二 个 参数 是 pagingAndSsort， 
这 个 参数 控制 DWR 是 否 需 要 分 页 和 排序 。 

ListRangeReader 部 分 与 后 台 的 ListRange.java 对 应 。totalProperty 表 示 后 台数 据 总 
数 ， 我 们 通过 它 指定 从 ListRange 中 读 取 totalsize 属 性 的 值 来 作为 后 台数 据 总 数 。 还 需要 指定 
root 人 参数 ， 告 诉 它 在 ListRange 中 的 数据 变量 的 名 称 为 aata， 随后 DWRProxy 会 从 ListRange 的 
data 属 性 中 获取 数据 并 显示 到 页 面 上 。 如 果 不 想 使 用 我 们 提供 的 ListRange.java 类 ， 也 可 以 自 
己 创 建 一 个 类 ， 只 要 把 totalProperty 和 data 两 个 属性 与 之 对 应 即 可 。 


10.10.3 DWRTreeLoader 


我 们 现在 来 尝试 一 下 让 树 形 也 支持 DWR。 有 了 前 面 的 基础 ， 整 合 DWR 和 树 形 就 更 简单 了 。 
在 后 台 ， 我 们 需要 树 形 节点 对 应 的 TreeNodae .java。 上 有 目前， 只 要 ida、text 和 1leaf3 项 就 可 以 了 。 


public class TreeNode f 
String id; 
String text; 
boolean leaf; 

} 


id 是 节点 的 唯一 标记 ， 知 道 了 id 就 能 知道 是 在 触发 哪个 节点 了 。text 是 显示 的 标题 ，leaf 
比较 重要 ， 它 用 来 标记 这 个 节点 是 不 是 叶子 。 

这 里 还 是 用 异步 树 , TreeNodeManager. java 里 的 getTree( ) 方 法 将 获得 一 个 节点 的 id 作为 
参数 ,然后 返回 这 个 节点 下 的 所 有 子 节 点 。 这 里 没有 限制 生成 的 树 形 的 深度 ,你 可 以 根据 自己 的 
需要 进行 设置 。TreeNodeManager .java 的 代码 如 下 所 示 : 
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public List getTreelString id) ({ 
List list = new ArrayList{); 
String Seedl = id + 1; 
String seed2 = id + 2; 
String seed3 = ia + 3; 
list.add(new TreeNode(seedli, "" + seedl, false)); 
list.add (new TreeNode(seed2, "" + seed2, false)); 
list.add(new TreeNode (seed3, "'" + seed3, true)); 


return list; 


} 


上 面 的 代码 并 不 复杂 , 它 实现 的 效果 与 在 Java 中 使 用 List 或 数组 是 相同 的 ， 因 为 返回 给 前 台 
的 数据 都 是 JSON 格 式 的。 前 台 使 用 JavaScript 处 理 返 回信 息 的 部 分 更 简单 ， 先 引入 DWRTree- 
Loader .js， 然 后 把 TreeLoader 替 换 成 DHRTreeLoder 即 可 ， 如 下 面 的 代码 所 示 : 


Var tree = new Ext.tree.TreePanel('tree', 1 
loader: new Ext.tree.DWRTreeLoader!({dataUrl: treeNodeManager .getTree}) 
}); 


参数 依然 是 dataUrl， 它 的 值 treeNodeManager .getTree 代 表 的 是 一 个 DWR 函 数 ， 我 们 不 
需要 对 它 进行 深入 研究 ， 它 的 内 部 会 自动 处 理 数据 之 间 的 对 应 关系 。DWR 有 时 真 的 很 方便 。 


10.10.4 DWRProxy 和 ComboBox 


DWRProxy 既 然 可 以 用 在 Ext .Gata.Store 中 ， 那 么 它 也 可 以 为 ComboBox 服 务 ， 如 代码 清单 
10-8 所 示 。 


代码 清单 10*8 DWRProxy 与 CombeBox 整 合 


Var info = Ext.,data.Record,.createl![ 
{name: 'id', type: 'int'}, 
{name: ‘name', type: 'string'} 

BE 





Var store = new Ext.data.Storelt{ 
proxy: new Ext.data.DWRProxy (infoManager.getItems, true), 
reader : new Ext .data.ListRangeReader!{ 
totalProperty: 'totalSize’, 
Yoots:s “datnm’, 
93 "1a: 
}, info) 
上 汪汪 


Var Combo = new Ext.form.ComboBox!(t{ 
store: store, 
displayField: ‘'name', 
valueField: ‘id', 
triggerAction: ‘all', 
typeAhead: true, 
mode: ' remote'， 
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emptyText : ' 请 选择 '， 
selectOnFocus: true 
ys 
combo.render{'combo'); 
既 可 以 用 mode: 'remote' 和 triggeraction:'all' 在 第 一 次 选择 时 读 取 数据 ， 也 可 以 设置 
mode:'local'， 然 后 手工 操作 store.1load() 并 读 取 数据 。 
DWR 要 比 Json-lib 方 使 得 多 ， 而 且 DWR 返 回 的 数据 可 以 直接 作为 JSON 使 用 ， 使 用 Json-lib 时 
还 要 面 对 无 休 无 止 的 循环 引用 。 
这 个 示例 稍微 复杂 一 些 ， 因 为 包括 依赖 jar 包 、class、XML 和 JSP， 所 以 示例 单独 放 在 
10.store/dwr2/ 下 ， 请 将 它们 复制 到 tomcat 的 webapps 下 ， 然 后 再 使 用 浏览 器 访问 。 


注意 EXT3.0 提 供 了 新 型 的 Ext Direct 组 件 , 专门 用 于 解决 不 同 平台 下 数据 绑 定 与 数据 传输 问题 ， 
它 和 DWR 一 样 也 是 属于 远程 方法 调用 的 范畴 ， 但 是 Ext Direct 提 供 了 不 同 平台 的 服务 端 实 
现 ， 因 此 可 以 运行 在 Java、.Net、PHP 等 主流 平台 之 上 ， 不 同 于 DWR 只 支持 Java 平 台 ， 





10.11 localxHR 支持 本 地 使 用 Ajax 


Ajax 不 能 在 本 地 文件 系统 中 使 用 ， 必 须 把 数据 放 到 服务 器 上 。 无 论 是 IIS、Apache、Tomecat， 
还 是 你 熟悉 的 其 他 服务 器 ， 只 要 支持 HTTP 协 议 ， 就 可 以 使 用 EXT 中 的 Ajax。 

至 于 本 地 为 何不 能 用 Ajax， 主 要 是 因为 Ajax 要 判断 HTTP 响 应 返回 的 状态 ， 只 有 status=200 
时 才 认 为 这 次 请 求 是 成 功 的 ， 因 此 必须 先 启 动 服务 器 才能 对 页 面 中 的 Ajax 操作 进行 测试 。 

不 过 事情 没有 绝对 的 , 下 面 我 们 就 来 介绍 一 个 无 需 启动 服务 器 就 允许 Ajax 支 持 访 问 读 取 文 件 
内 容 的 插件 1ocalxXHR。1localxHR 所 作 的 就 是 强行 修改 响应 状态 ， 让 Ajax 的 请 求 响 应 在 没有 启动 
服务 器 的 情况 下 也 可 以 继续 进行 。 

下 面 我 们 来 分 析 一 下 localxHR 的 源 代码 。 

D 加 入 了 一 个 forceActivex 属 性 ， 默 认 是 false， 它 用 来 控制 是 否 强 制 使 用 activex， 

activex 是 在 IE 下 专用 的 。 
口 修改 了 createxhrobject 函 数 ， 只 是 在 最 开始 处 加 了 一 条 判断 语句 ， 如 下 所 示 : 


if {Bxt .isIE7? g&& !!this.forceActiveXx) {throw("IE7TforceActiveXx");) 
口 增加 了 getHttpstatus 函 数 ， 这 是 为 了 处 理 HTTP 的 响应 状态 ， 如 代码 清单 10-9 所 示 。 
代码 清单 10-9 处 理 HTTP 响 应 状态 


getHttpStatus: function(reqObj)t 
Var statObj = { 
status:0 
:StatusText:'' 
,isError:false 
;isLocal:false 
,isOK:false 
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}3 
try ( 


if(!reqObj})throw('noobj'); 
statobj .status = reqObj.status || 0; 
statobj .isLocal = !regqObj.status && location.protocol == "file:” || 


Ext .isSafari && reqObj.status == undefined.; 


StatObj .statusText = reqObj.statusText || ''; 


statobj .isoK = (statObj.isLocal || 
{gtatobj ,status > 199 && statObj.status < 300) || 
statObj .Status == 304) ; 


} cacchite)1{ 
//status may not avail/valid yet. 
statOobj.isError = true; 

} 


return statObj:; 
] ， 


代码 清单 10-9 为 状态 增添 了 更 多 语义 ，status 表 示 状 态 值 ，statusText 表 示 状 态 描述 ， 
isError 表 示 是 否 有 错误 ，isLocal 表 示 是 否 在 本 地 进行 Ajax 访问 ，isok 表 示 操 作 是 否 成 功 。 

判断 isLocal 是 否 为 本 地 的 有 两 种 方法 : reqobj 没 有 status， 而 且 请 求 协议 是 tile:: 浏 
览 器 是 Safari， 而 且 reqObj .status 没 有 定义 。 

statobj 中 的 isOK 属 性 用 来 判断 此 次 请 求 是 否 成 功 。 判 断 请 求 是 否 成 功 的 条 件 很 多 ， 例 如 ; 
isLocal 的 属性 为 Lrue、 响 应 状态 值 在 199 到 300 之 间 、 响 应 状态 值 是 304 等 。 如 果 处 理 过 程 中 出 
现 了 异常 ， 就 会 将 isError 属 性 设置 为 true， 最 后 会 把 配置 好 的 statobj 对 象 返 回 ， 等 待 下 一 个 
步骤 的 处 理 。 

localXHR.js 对 handleTransactionResponse 国 数 进行 了 简化 。 因 为 增加 的 getHLttp- 
Status 图 数 很 好 地 封装 了 与 请 求 相 关 的 各 种 状态 信息 ， 所 以 在 handaleTransactionResponse 
函数 中 我 们 不 会 看 到 让 人 头晕 目 眩 的 响应 状态 代码 。 取 而 代 之 的 是 isError 和 isoK 这 些 更 容易 理 
解 的 属性 ，localxHR ,js 直接 使 用 这 些 属 性 来 处 理 响应 。 

createResponseObject 函 数 被 大 大 强化 了 了 人。 其实 前 半 部 分 都 是 一 样 的 ，1ocalxHR.js 中 对 
isLocal 做 了 大 量 的 处 理 ， 响 应 中 的 responseText 可 以 从 连接 中 获得 。 如 果 需 要 XML， 它 就 使 
用 Activexobject ("Microsoft.XMLDOM") 或 new DOMParser{) 把 responseText 解 析 成 XML 
放 到 response 里 ， 响 应 状态 也 是 重新 计算 的 ， 这 样 就 能 让 Ajax 正常 调用 了 。 

最 后 处 理 的 是 asyncRequest 函 数 。 如 果 在 异步 请 求 时 出 现 异 常 ， 就 调用 handleTransac- 
tionResponse 返 回响 应 ， 然 后 根据 各 种 情况 稍微 修改 header 属 性 。 

我 们 来 看 看 下 面 这 行 代 码 : 


Ext .1ib.Ajax.forceActiveX = (document.location.protocol == ‘'file:'); 


如 果 协 议 是 file:， 就 强制 使 用 activex。 
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注意 EXT-3.0 重 写 了 底层 Ajax 功能 的 实现 ， 使 用 大 量 匿名 函数 替代 了 之 前 2.x 版 本 中 的 单 例 形 
式 ， 所 以 原本 用 于 EXT-2.x 中 的 localXHR.js 已 经 无 法 用 在 EXT-3.0 中 了 ， 因 此 我 们 基于 
EXT-3.0 重 新 编写 了 localXHR， 使 它 可 以 支持 EXT-3.0 中 本 地 Ajax 的 请 求 。 





10.12 小结 


本 章 系 统 地 讲述 了 Ext .data 包 中 的 各 个 类 的 功能 和 使 用 方式 ， 还 讨论 了 如 何 将 EXT 与 DWR 
通过 自 定义 的 proxy 相 结合 的 示例 。 同 时 介绍 了 如 何 使 用 Ext .data.Connection 与 后 台 进 行 数 
据 交互 ， 还 专门 介绍 了 它 的 子 类 Ext .Ajax， 并 讨论 了 EXT 中 Ajax 的 应 用 以 及 在 回调 函数 中 使 用 
scope 或 createDelegate{) 解 决 this 的 问题 。 

接着 详细 介绍 了 类 Ext .data .Record 和 Ext .data .store 的 功能 和 使 用 方法 , 这 两 个 类 结合 
起 来 形成 了 Ext .data 中 的 主体 数据 模型 ， 很 多 组 件 (包括 表格 和 ComboBox) 都 是 建立 在 它们 之 
上 的 。 除 此 之 外 ， 还 讨论 了 常用 的 proxy、reader、store: SimpleStore 和 Jsonstore， 以 及 
它们 的 应 用 场景 。 

最 后 介绍 了 扩展 插件 localXHR.js， 它 可 以 解决 EXT 中 Ajax 无 法 访问 本 地 文件 的 问题 。 
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实用 工具 








本 章 内 容 

口 EXT 提 供 的 常用 函数 

口 使 用 DomHelper 和 Template 动 态 生 成 HTML 
口 使 用 Ext .Utils .css 切换 主题 

D 县 停 提示 

口 使 用 Ext .state 保 存 状态 

口 使 用 fx 实现 动画 效果 

口 局 部 更 新 网 页 内 容 

口 使 用 Ext .util .Format 对 数据 进行 格式 化 

口 使 用 Ext .util .css 管 理 CSS 样 式 

口 使 用 Ext .util .clickRepeater 处 理 点 击 事件 
口 使 用 Ext .util .DelayedGTask 延 时 执行 函数 

口 使 用 Bxt .util.TaskRunnez 执 行 循环 任务 

日 混合 型 集合 Ext .util .MixedCollection 

口 使 用 Ext .util.mextMetrices 获 得 文本 所 占 的 高 度 和 宽度 
口 使 用 Ext .KeyNav 处 理 导航 按键 

口 使 用 Ext .KeyMap 为 对 象 绑 定 按键 功能 

D 扩展 

口 门户 组 件 Ext .ux.Portal 

口 桌面 组 件 Ext .Desktop 





1 


一 和 


.1 EXT 提供 的 常用 函数 
EXT 提 供 了 许多 常用 函数 和 工具 ， 通 过 这 些 函数 可 以 避免 许多 重复 的 工作 。 比 如 可 以 利用 


Ext .isGecko 、Ext.isIE 、Ext.isIE6 、Ext.isIE7 、Ext.isopera 、Ext.isSafari 和 
Ext .issafari2 直 接 判 断 用 户 当前 使 用 的 浏览 器 类 型 。 通过 这 些 函 数 也 可 以 实现 : 获取 HTML 
中 的 元 素 、 批 量 查 询 DOM 元 素 、 编 码 或 解析 JSON 数 据 、 实 现 EXT 中 类 的 继承 与 属性 复制 ， 以 及 
更 灵活 地 定义 命名 空间 ， 等 等 。 现 在 ， 我 们 来 看 一 下 如 何 使 用 这 些 常 用 的 函数 和 工具 。 
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11.1.1 onReady 函数 


在 使 用 EXT 之 前 ， 我 们 都 要 面 对 页 面 加 载 的 问题 。 因 为 EXT 需 要 操作 HTML 中 的 DOM 内 容 ， 
只 有 页 面 完全 下 载 到 客户 端 并 被 浏览 器 完全 解析 后 ， 我 们 才能 启动 EXT 执 行 预先 设置 的 功能 。 但 
是 ， 我 们 如 何 才能 得 知 页 面 在 何 时 被 解析 完毕 呢 ? 

我 们 可 以 通过 EXT 提 供 的 onReady 函 数 来 实现 这 项 功能 ， 利 用 它 来 注册 HTML 内 容 并 加 载 完 
成 后 所 需 执行 的 代码 。onReady 函 数 有 3 个 参数 ， 第 一 个 参数 是 必须 的 ， 表 示 HTML 加 载 完 成 后 
需要 执行 的 函数 ， 第 二 个 参数 表示 函数 的 作用 域 ， 第 三 个 参数 表示 函数 执行 的 一 些 其 他 操作 ， 例 
如 延迟 时 间 《〈 以 毫秒 为 单位 ) 等。 大 多 数 情 况 下， 我 们 只 需要 用 到 第 一 个 参数 。 

在 下 面 的 示例 中 ， 代 码 会 在 页 面 加 载 后 执行 init () 函数 ， 然 后 弹出 提示 信息 "Everything 
is ready."， 如 下 面 的 代码 所 示 : 

function init()t 

alert ("Everything is ready."); 


} 
Ext .onReady (init)}).: 


我 们 可 以 在 一 个 页 面 中 调用 onReady 注 册 多 个 处 理 函数 ， 这 些 函 数 会 被 放 到 事件 队列 中 ， 
在 HTML 加 载 完 成 后 依次 执行 。 onReady 函 数 的 第 三 个 参数 是 与 处 理 函 数 执行 相关 的 一 些 特殊 
属性 的 对 象 ， 其 中 包含 delay、single、buffer 等 属性 。 例 如 ， 在 上 面 的 代码 中 添加 下 面 这 
行 代码 : 

Ext .onReady (function() {alert ("2")}),this, {delay:5000}); 


页 面 加 载 完成 后 ， 会 先 执行 init 函 数 中 的 代码 ，5 秒 后 再 执行 上 面 代 码 中 onReady 注 册 的 匿 
名 函数 。 

onReady 函 数 的 第 二 个 参数 被 称 作 函 数 作用 域 ， 作 用 域 是 JavaScript 中 的 一 个 比较 关键 的 特 
性 。 下 面 的 代码 演示 了 如 何在 onReady 函 数 中 使 用 作用 域 : 


Var targetl={value:"this is target}"}; 
Var target2={value: "this is target2"}; 
function init() { 

alert {this.value); 
} 
Ext .onReady (init, targetl1); 
Ext .onReady (init,target2); 


上 面 的 代码 直接 调用 EXT 类 的 onReady 方 法 ， 并 指定 在 页 面 加 载 完 毕 后 执行 init () 函数 。 
init () 函数 的 作用 是 输出 当前 对 象 的 value 属 性 值 ， 这 里 的 this 相 当 于 对 作用 域 的 引用 。 执 行 
这 段 代 码 后 便 可 以 看 到 onReady 中 作用 域 的 效果 。 第 一 次 用 target1 作 为 init1() 函数 的 作用 域 ， 
所 以 弹出 框 中 显示 的 this .value 值 是 "this is targetl1"。 第 二 次 用 target2 作 为 init () 函数 
的 作用 域 ， 所 以 弹出 框 中 显示 的 this .value 值 是 "this is target2"。 


11.1.2 get 函数 
EXT 中 包含 了 几 个 以 get 开 头 的 函数 ， 这 些 函 数 可 以 用 来 获取 HTML 中 的 DOM 对 象 、 当 前 
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HTML 中 的 组 件 和 EXT 元 素 等 。 但 是 ， 在 使 用 时 要 注意 区 分 获取 的 对 象 的 类 型 。 

1. get 函 数 

get 范 数 用 来 获取 一 个 EXT 元 素 ， 也 就 是 类 型 为 Ext .Element 的 对 象 。Ext .Element 类 是 
EXT 对 DOM 的 封装 ， 每 个 Element 对 象 都 对 应 着 HTML 中 的 一 个 DOM 元 素 。 我 们 可 以 为 每 一 个 
DOM 创 建 一 个 对 应 的 Element 对 象 ， 并 通过 Element 对 象 中 的 函数 来 实现 对 DOM 的 指定 操作 。 
例如 ， 可 以 使 用 hiade 消 数 隐 藏 元 素 ， 使 用 initpD 函 数 为 指定 的 DOM 添 加 拖 放 特 性 等 。get 函 数 
其 实 是 Ext .Element .get 的 简写 形式 。 

get 函 数 中 只 有 一 个 参数 ， 但 这 个 参数 可 以 表示 多 种 含义 。 它 可 以 是 DOM 节 点 的 ia， 也 可 以 
是 一 个 Element， 或 者 是 一 个 DOM 节 点 对 象 。 我 们 来 看 看 下 面 的 示例 代码 : 


Ext.onReady (function()t 
Var e=new Ext.Element ("hello"),; 
alert (Ext .get {"hello")); 
alert (Ext .get {document .getElementById("hello"))):; 
alert (Ext .get (e)); 
}}. 


对 应 的 HTML 页 面 中 包含 一 个 id 为 hello 的 aiv， 代 码 如 下 所 示 ; 
<div id="hello">hello world</div> 


从 上 面 的 示例 中 可 以 看 出 ，Ext .get ("hello") 、 Ext .get (document .getElement-— 
ById("hello"))、Ext .get(e) 这 3 个 函数 都 可 以 获取 一 个 与 DOM 节 点 hel1lo 对 应 的 EXT 元 素 。 
get 函 数 可 以 自动 判断 参数 的 类 型 ， 最 终 返 回 我 们 需要 的 结果 。 

Element 与 document .getElementById( "myDiv") 获 取 的 对 象 是 不 一 样 的 。 虽 然 可 以 使 用 
以 前 的 方式 获得 指定 id 的 元 素 ， 但 是 会 失去 EXT 提 供 的 各 种 常用 操作 ， 如 动画 、 定 位 、CSS、 事 
件 和 拖 放 等 。 如 果 你 想 通 过 EXT 的 get 函 数 获 得 指定 ia 在 HTML 中 对 应 的 实际 DOM 对 象 ， 只 需要 
使 用 Ext .get (id) .dom。 

下 面 我 们 来 看 一 个 稍微 复杂 点 的 示例 ， 具 体 步骤 如 下 所 示 。 

(1) 先 获得 一 个 Element。 


Var myDiv = Ext.get!{'myDiv'): 


这 里 传 入 参数 的 是 一 个 ia， 我 们 需要 先 在 HTML 中 添加 代码 <aiv ida= "myDiv"></div>， 然 
后 用 Ext .get ('myDiv' ) 获取 这 个 Giv 对 应 的 Element 对 象 。 现 在 这 个 对 象 已 经 存放 到 EXT 的 缓 
存 中 了 ， 当 需要 再 次 使 用 它 时 ， 可 以 直接 从 缓存 中 提取 这 个 对 象 ， 不 需要 重复 执行 封装 操作 ， 这 
在 很 大 程度 上 提高 了 程序 的 运行 效率 。 

(2) 用 获得 的 Element 对 和 象 定义 一 个 简单 的 动画 效果 ， 如 下 面 的 代码 所 示 : 





myDiv.hightlight {(); // 突 出 显示 ， 然 后 渐 退 
myDiv.addCclass('red'); / /指定 样式 表 
myDiv.center (); // 居 中 显示 
myDiv,setopacity(.25) ; // 半 透明 效果 


(3) 实现 渐变 动画 效果 ， 代 码 如 下 所 示 : 


myDiv.setWidth(100); 
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虽然 使 用 setwiath 函 数 可 以 直接 设置 mypiv 的 宽度 ， 但 是 无 法 实现 渐变 的 动画 效果 。 
myDiv.setwiadth(100，true) ; 


这 里 只 需要 为 setwidath 函 数 增 加 第 二 个 参数 ， 就 相当 于 打开 了 动画 的 开关 。 现 在 我 们 可 以 
看 到 mypiv 的 宽度 从 初始 大 小 逐渐 变 成 了 100 像 素 ， 如 此 简单 就 实现 了 动画 效果 。 
还 可 以 控制 动画 的 效果 ， 如 下 面 的 代码 所 示 ; 
myDiv.setWidth{(100, { 
Guration: 2, 
callback: function() {alert(' 渐 变 完成 '))， 


scope: this 
}); 


duration 表 示 间 隔 ， 数 字 越 大 移动 越 慢 ，cal1lback 是 动画 完成 后 执行 的 回调 函数 ， scope 
是 callback 的 作用 域 。 这 些 选 项 都 会 影响 动画 的 最 终 效果 。 
示例 在 11.utiy01-02-01.html 中 。 
2. getcmp 函 数 
getCmp 函 数 用 来 获得 一 个 EXT 组 件 ， 也 就 是 一 个 已 经 在 页 面 中 被 初始 化 了 的 Component 或 
其 子 类 的 对 象 , getcmp 函 数 可 以 根据 指定 的 ia 获得 对 应 的 Ext .Component 。 实 际 上 ,Ext . getCmp () 
是 Ext .ComponentMgr .get {) 的 简写 形式 。EXT 中 创建 的 每 个 组 件 都 会 注册 到 componentMgr 
中 ， 只 要 得 到 它 的 ia， 就 可 以 获得 对 应 的 组 件 ， 如 下 面 的 代码 所 示 。 
Ext .onReady (function{){ 
Var h=new Ext.Panell{t{ 
a 
title:" 旧 的 标题 "， 
renderTo: "hello", 
width:300, 
height:200} 
) ; 
Ext .getcmp ("h2") .setTitle(" 新 的 标题 *) ; 
) ; 


上 面 的 代码 使 用 Ext .getcmp ("h2") 来 获得 id 为 h2 的 组 件 ， 并 调用 其 setTitle 方 法 来 设置 
该 面板 的 标题 。 通 过 这 种 方法 ， 我 们 可 以 获得 之 前 已 经 创建 的 任意 组 件 ， 并 执行 相应 的 操作 。 
3. getDom 函 数 
getDom 函 数 能 够 获得 文档 中 的 DOM 节 点 , 它 只 包含 一 个 参数 , 该 参数 可 以 是 DOM 节 点 的 ia、 
DOM 节 点 的 对 象 或 DOM 节 点 对 应 的 EXT 元 素 等 。 Ext .getDom( ) 可 以 看 作 Ext .get() .dom 的 等 
同形 式 ， 如 下 面 的 代码 所 示 : 
Ext.onReady (function()f{ 
Var e=new Ext.Blement ("hello"); 
Ext .getDom("hello'"); 
Ext .getDoml(e); 


Ext .getDoml(e.dom); 
人 


对 应 的 HTML 代 码 如 下 所 示 : 
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<div id="hello">tttt</div> 


在 上 面 的 代码 中 ，Ext .getDom{"hello") 、Ext .getDom(e) 、Ext .getDom(e.dom) 3 条 语 
名 返回 的 是 同一 个 DOM 节 点 对 象 。getDom 函 数 将 根据 参数 的 类 型 自动 获得 我 们 所 需 的 结果 。 
4. getBody 函 数 
getBody 函 数 可 以 直接 获取 文档 中 与 document .body 这 个 DOM 节 点 对 应 的 EXT 元 素 。 实 质 
就 是 把 document .body 对 象 封装 成 EXT 元 素 对 象 并 作为 结果 返回 ， 该 方法 不 带 任何 参数 。 例 如 ， 
下 面 的 代码 会 把 面板 h 直 接 泻 染 到 文档 的 body 元 素 中 : 


Ext .onReady (function() 

Var h=new Ext.Panell({title: "测试 " ,width:300,height:200}); 
h.render (Ext .getBody ()}; 

}) 7 


我 们 可 以 把 它 当 作 快 速 更 新 页 面 显示 组 件 的 方法 。 

5. getDoc 函 数 

getDoc 函 数 可 以 将 当前 HTML 文 档 对 象 〈 也 就 是 document 对 象 ) 封 装 成 EXT 的 Element 对 
象 并 人 返回， 该 方法 不 带 任何 参数 。 

与 getBody 函 数 类 似 , getDoc 为 我 们 提供 了 快速 获取 Gocument 对 象 的 方法 , 只 不 过 getBody 
函数 获取 的 body 部 分 只 能 用 于 显示 ， 而 aocument 对 象 包含 了 更 多 对 页 面 的 操作 。 


11.1.3 query 函数 和 select 函数 

上 一 节 讨 论 的 函数 都 只 能 获得 单个 元 素 。 在 需要 批量 获得 元 素 的 情况 下 ， 就 需要 用 到 auery 
和 select 函 数 了 。 函 数 auery 是 Ext .Domouervy .select() 的 简写 方式 。 

1. query 函 数 和 select 函数 的 基本 应 用 

query 消 数 和 select 函数 的 区 别 : 前 者 返回 搜索 到 的 元 素数 组 ， 后 者 返回 的 是 一 个 
Ext .CompositeElement 类 型 的 对 象 。 对 于 auery 返 回 的 数组 ， 我 们 只 能 循环 迭代 处 理 ， 而 对 于 
select 返 回 的 对 象 ， 我 们 还 可 以 调用 它 提供 的 各 种 函数 并 执行 特殊 的 操作 。 

首先 ， 我 们 来 了 解 一 人 auery 和 select 函 数 的 基本 操作 方式 。 首 先 ， 创 建 一 个 包含 <p> 标 签 
和 <Giv> 标 签 的 HTML 页面， 让 <p> 标 签 和 <dqiv> 标 签 交 错 显 示 ， 这 样 能 更 好 地 演示 操作 的 效果 。 
页 面 内 容 如 下 面 的 代码 所 示 : 

<p>pl</p> 

<br> 

<div class="red">div,redl</div> 

<br> 

<p>p2</p> 

<br> 

<div class="red">div.red2</div> 

<br> 


<P>P3</P> 
<br> 


我 们 希望 获取 HTML 中 所 有 的 <p> 元 素 ， 然 后 让 这 些 <p> 元 素 都 突出 显示 。 
使 用 select 函 数 的 情况 如 下 : 
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Ext.select('p') .highlight {); 


使 用 query 函 数 的 情况 如 下 : 


function selectP{) { 
var array = Ext.query('p'); 
for (var i = 0; i < array.length; i++) { 
Ext .get (array[i]) .highlight (); 
} 
} 


进一步 ， 如 果 我 们 希望 获得 拥有 class='red' 样 式 的 div 元 素 ， 也 可 以 通过 query 和 select 
冰 数 获得 。 
使 用 select 函 数 的 情况 如 下 : 


Ext.select('div,red') .highlight (); 
使 用 query 函 数 的 情况 如 下 : 


function selectDiv() 1 
Var array = Ext.queryl( 'div.red'); 
for (var i = 0; i < array.length; i++) { 
Ext .get (array[i]) .highlight (); 
} 
} 


由 此 可 匈 ， 我 们 可 以 在 select 函 数 返回 的 Ext .CompositeElement 对 象 上 直接 执行 对 应 的 
功能 函数 ， 它 会 自动 对 包含 的 所 有 子 元 素 产 生 作 用 。auervy 函 数 返 回 的 都 是 原生 DOM 对 象 ， 需 要 
我 们 先 手工 遍历 查询 对 象 , 然后 再 将 它们 转换 成 对 应 的 Ext .Element 对 象 , 这 样 才能 实现 各 种 功 
能 函数 。 

示例 见 11.utiy01-03-01.html 和 11.utiy01-03-02.html。 

2. CSS 元 素 选 择 符 

在 query 和 select 函 数 中 ， 我 们 通过 CSS 元 素 选择 符 来 批量 获取 HTML 页 面 中 的 元 素 ， 如 下 
面 的 示例 所 示 。 

口 Ext .query ('span');:; 获得 HTML 中 所 有 的 span 标 签 。 

Ext .query('span'，'foo');: 获得 jd="foo" 元 素 下 的 所 有 span 标 签 。 
Ext .query ( '#foo' ) ;: 获得 id="foo' 的 标签 。 
Ext .query{' .foo');: 获得 所 有 class="foo" 的 标签 。 
-query('*');; 使 用 了 通配符 ， 它 会 获得 HTML 中 的 所 有 标签 。 
Ext .query('div p');: 获得 处 于 aiv 标 签 下 的 所 有 p 标 签 。 
Ext .query (div,p');: 获得 所 有 的 aiv 和 Pp 标 签 。 

通过 上 面 列 举 的 这 些 示 例 ， 我 们 对 CSS 元 素 选 择 符 有 了 一 些 初步 的 了 解 。 

CSS 元 素 选 择 符 中 有 3 种 最 基本 的 查找 方式 ;第 一 种 方式 是 直接 输入 span 和 div 等 标签 的 名 
称 ， 它 会 去 HTML 中 查找 与 其 名 称 相同 的 所 有 标签 ;第 二 种 方式 是 使 用 "#foo"， 这 种 以 # 符 号 开 
头 的 形式 表示 我 们 查找 的 是 一 个 ia= "foo" 的 元 素 ， 它 会 查找 对 应 ia 的 元 素 ， 将 这 个 元 素 作为 结 
果 返 回 ; 第 三 种 方式 是 使 用 ".foo"， 请 注意 开头 的 句点 ， 这 种 情况 下 它 会 去 查找 所 有 
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class="foo" 的 元 素 ， 并 将 它们 作为 结果 返回 。 

除了 上 面 3 种 基本 的 查询 标签 的 方式 ，CSS 元 素 选择 符 还 支持 使 用 通配符 。 在 上 面 的 示例 中 ， 
我 们 就 使 用 了 星 号 (*) 来 匹配 所 有 的 标签 。 我 们 还 可 以 使 用 逗号 (,) 一 次 指定 多 个 标签 ， 比 如 
Ext .query ("div,p") 就 会 同时 查找 aiv 和 p 两 种 标签 ， 这 样 我 们 就 可 以 一 次 获得 多 种 标签 组 合 
的 结果 了 。 

CSS 元 素 选 择 符 还 支持 按 层次 进行 查找 。 例 如 上 例 中 的 Ext .query ("div span")， 它 就 会 
获得 所 有 在 div 标 签 下 的 span 标 签 , 这 样 我 们 就 可 以 忽略 掉 处 于 其 他 结构 下 的 span 标 签 。 如果 有 
一 些 span 标 得 没有 包含 在 div 标 签 内 ,就 不 会 被 放 到 返回 的 结果 里 。 我 们 也 可 以 指定 一 个 查询 的 
根 结 点 ， 比如 query ( 'Sspan', 'foo') ;就 是 查找 所 有 包含 在 id="foo" 节 点 下 的 span 标 签 。 默认 
情况 下 ， 我 们 会 从 body 标 签 开 始 查找 ， 通 过 指定 根 结 点 的 位 置 ， 还 可 以 缩小 范围 ， 从 而 获得 更 
加 精确 的 查询 结果 。 

示例 在 11.util/01-03-03.html 中 。 

3. CSS 属 性 选择 符 

除了 可 以 根据 HTML 中 的 标签 、ia、class 进 行 查找 以 外 ， 我 们 还 可 以 根据 HTML 中 元 素 的 
属性 进行 查找 ， 如 下 面 的 示例 所 示 。 

D Ext .query('* [name]');: 获得 所 有 包含 name 属 性 的 元 素 。 

口 Ext.auery('* [name=bar]');: 获得 所 有 name 属 性 等 于 bar 的 元 素 。 

口 Ext .query('*[name!=bar] ');: 获得 所 有 name 属 性 不 等 于 bar 的 元 素 。 

口 Ext .query{'* [name^=b]');: 获得 所 有 name 属 性 以 bp 开 头 的 元 素 。 

D Ext .query ('* [name$=r]');: 获得 所 有 name 属 性 以 r 结 尾 的 元 素 。 

口 Ext .auery('* [name*=a] ');: 获得 所 有 name 属 性 中 含有 a 的 元 素 。 

CSS 属 性 选择 符 是 包含 在 中 插 号 [] 中 的 表达 式 ， 上 例 中 所 有 的 [] 前 面 都 使 用 了 “*” 通 配 符 ， 
表示 我 们 将 遍历 所 有 标签 来 获得 包含 指定 属性 的 元 素 。 

我 们 可 以 直接 使 用 属性 名 称 来 获得 拥有 这 一 属性 的 元 素 , 也 可 以 通过 表达 式 来 约束 获得 对 应 
属性 值 的 元 素 。 在 上 面 的 示例 中 ， 表 达 式 中 使 用 了 =、!=、^=、5$=、*= 等 操作 符 ， 通 过 这 些 表达 
式 我 们 就 可 以 获得 需要 的 元 素 了 。 

示例 见 11.utiV01-03-04.html。 





4. CSS 值 选择 符 
我 们 还 可 以 对 HTML 元素 中 stvle 属 性 包含 的 CSS 样 式 的 数值 进行 查找 ,如 下 面 的 示例 所 示 。 
口 Ext .query ('*{color=red}');: 获得 所 有 style="color:red" 的 标签 。 


口 Ext .query ('*{color=red}】 *{color=pink}');: 获得 所 有 style="color:red" 元 素 
下 style="color:pink" 的 标签 。 

D Ext .query('*{color!=red}');: 获得 所 有 color 的 值 不 等 于 red 的 标签 。 

口 Ext .query('*{color^=yel}');: 获得 所 有 color 的 值 以 r 开 头 的 标签 。 

口 Ext .query ('*{color$=ow} ');: 获得 所 有 color 的 值 以 d 结 尾 的 标签 。 

口 Ext .query ('*{color*=ow} ');: 获得 所 有 color 的 值 包含 a 的 标签 。 

CSS 值 选择 符 是 包含 在 大 插 号 {} 中 的 表达 式 ， 上 例 中 所 有 的 {} 前 面 都 使 用 了 “*” 通 配 符 ， 
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表示 我 们 将 遍历 所 有 标签 来 获得 包含 指定 style 值 的 元 素 。 需要 注意 的 是 , 我 们 这 次 使 用 的 style 
值 表 达 式 与 实际 中 的 HTML 标 签 的 属性 有 些 差异 。 例 如 ，Ext .query ('*{color=red}') 对 应 到 
HTML 标 签 中 ， 获 得 的 结果 应 该 是 包含 了 style="color:red" 的 各 种 标签 ， 这 里 的 CSS 样 式 中 的 
color 的 值 就 是 我 们 所 需要 查找 的 部 分 。 

我 们 可 以 通过 表达 式 来 约束 获得 对 应 style 值 的 元 素 。 在 上 面 的 示例 中 ， 表 达 式 中 也 使 用 了 
=、!=、^=、$=、*= 等 操作 符 ， 通 过 这 些 表达 式 就 可 以 获得 所 需 的 元 素 了 。 

示例 见 11.utiy01-03-05.html。 


11.1.4 encode 函数 和 decode 函数 


encode 和 decode 函 数 是 专门 用 来 对 JSON 数 据 进行 编码 和 解码 的 函数 。Ext .encode () 对 应 
的 解码 方法 为 Ext .decode () 。 

encode 晴 数 的 作用 是 对 对 象 、 数 组 或 其 他 值 进行 编码 ， 将 对 象 转换 成 JSON 字 符 串 的 形式 ， 
如 下 面 的 代码 所 示 : 


Ext .encode{obj) == '{"propl":"a0~ 16@#S%^Ex ()-_+={}[]|\\:;\"\', ,7?/","prop2": 
["x","y"}), "prop3":{"nestedPropl":"abc", "nestedProp2":;456}}' 


上 例 中 , 我 们 用 Ext .encode 函 数 将 一 个 简单 的 对 象 转换 为 ISON 格 式 的 字符 串 。 这样 做 的 主 
要 目的 是 把 JavaScript 中 的 对 象 通过 HTTP 协 议 发 送 到 后 台 服 务 器 并 进行 相应 处 理 。 因 为 HTTP 协 议 
只 能 发 送 字符 串 形式 的 参数 ， 所 以 无 法 将 JavaScript 中 的 对 象 直接 传递 给 后 台 ， 这 就 需要 先 用 
Ext .encode 函 数 对 JavaScript 对 象 进行 编码 ,生成 对 应 的 JSON 格 式 的 字符 串 ， 再 发 送 给 后 台 服 务 
器 处 理 。 

不 过 ， 如 果 希 望 将 JSON 转 换 为 可 通过 HTTP 发 送 的 有 效 字符 串 形式 , 还 需要 再 次 对 它 进行 纺 
码 。 因 为 HTTP 规 范 规定 ，HTTP 请 求 只 能 发 送 ISO-8859-1 编 码 的 字符 ， 所 以 像 中 文 这 种 无 法 使 用 
ISO-8859-]1 编 码 的 字符 , 还 需要 先 转换 成 ISO-88S$9-1 编 码 格式 才能 通过 HTTP 协 议 传输 , 如 下 所 示 。 


encodeURIComponent (Ext .encode (obj) ) == "$%$7B%22prop1$%2283RAS22a0~ 革 601$%40%23 芋 24$25 有 
5E%26* ( ) -_%2B%3DS7B$%7DY%5B5D$%TC%5C%5C%3RA%3B4%55C%22 58%2C . $3FSe2F%S22%2C$%22prop2%22%3A$%5 
B%22x%22%2C%22y%22%5D%2C%$22prop3%22%3A%7B%S22nestedPpropi%22%3A%22abc%22%2C%22nested 
Prop2%22%3A456%7D%®$7D" 


现在 ,我 们 可 以 把 经 过 两 次 编码 后 获得 的 最 终 参 数 绑 定 到 ur1 上 ， 然 后 传递 给 后 台 服务 器 进 
行 处 理 。 只 需要 像 下 面 这 样 ， 直 接 把 编码 后 的 结果 附加 到 ur1l 的 后 面 。 

"http://url.com?json=" + encodeURIComponent (Ext .encode! obj)) 

也 可 以 使 用 posT 方 式 的 请 求 ， 先 用 编码 后 的 参数 结果 生成 对 应 的 参数 ， 然 后 将 这 些 参数 附 
加 到 请 求 的 boay 部 分 ， 发 送 给 后 台 服 务 器 进行 处 理 。 

"json=" + encodeURIComponent (Ext .encode (obj) ) 

除 以 上 方法 外 ， 我 们 还 可 以 用 urlEncode() 函数 对 参数 进行 处 理 ， 它 会 把 JSON 对 象 转换 成 
HTTP 要 求 的 参数 形式 ， 并 对 参数 值 部 分 进行 编码 , 最 终 得 到 的 字符 串 就 可 以 直接 拼接 到 请 求 ur1 
上 了 ， 如 下 面 代码 所 示 : 
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Ext .urlEncode{({ json: Ext.encode(obi)}) == "json=%7B%22propl%®%22%3A%22a0~%601!S40%23% 
24%25%5E%26* ()—_ %2BS3D$S7B%S7TDSSBSSDSTCSS CS CEIAYIBSS CS22 '%2C .3F%2F%S22%2C%22prop2% 

22%3A%5BS22X%22%2C%22y%22%5D$%2C%22prop3%22%3A%7B%S22nestedPropl%22%3A%22abc%22%2C%22 

nestedProp2%22%3A456%7D%7D" 


无 论 使 用 上 述 哪 种 做 法 ， 在 请 求 发 送 至 后 台 服 务 器 后 ， 服 务 器 对 接收 到 的 参数 进行 解析 ， 最 
百 会 得 到 如 下 所 示 的 参数 形式 : 

{"Propl":"a0~、1@#S$S^&t ()-_+={f[]|NNrN 37 "prop2":{"x","y"], "prop3": 

{"nestedPropl":"abc", "nestedProp2":456}} 

这 样 我 们 就 可 以 直接 调用 JSON 中 保存 的 数据 了 。 

Ext .decode() 函 数 的 作用 是 将 字符 串 解析 为 JISON 对 象 ,但 被 解析 的 字符 串 的 格式 不 能 是 任 
意 的 ， 它 必须 符合 JSON 要 求 的 字符 串 格式 。 如 果 字 符 串 的 格式 是 无 效 的 ， 该 函数 将 抛 出 语法 错 
误 ， 实 际 应 用 过 程 如 代码 清单 11-1 所 示 。 


代码 清单 11-1 ”使 用 aecodae() 解析 服务 器 返回 的 内 容 


Function successFn(response,options){ 
Var obj= Ext.dGecode (response.responseText ) ; 
alert {obj.username); 
} 
function failureFn(response,options) { 
alert {' 请求 失败 了 ')，; 
} 
Ext .Ajax.request!{i{ 

Urls "form, ep, 

success: successFn, 

failure: failurerFn, 

params: {dsname: “INSERT' } 
}) 5 


这 里 的 回调 函数 返回 的 参数 是 一 个 XHR〔〈 即 xmlHttpRequest) 对 象 ， 我 们 可 以 通过 该 对 象 
的 responseText 或 responseXML 属 性 获得 由 服务 器 端 返回 的 数据 信息 。 在 Ajax 应 用 中 ， 我 们 经 
常会 让 服务 器 端 返回 JSON 数 据 。 由 于 JSON 数 据 是 字符 串 ， 因 此 在 程序 中 需要 先 把 它 解析 成 
JavaScript 对 象 ， 然 后 才 可 以 使 用 。 要 把 JSON 数 据 解析 成 JavaScript 对 象 ， 可 以 直接 使 用 
Ext .decode 函 数 。 
假设 后 台 服 务 器 返回 的 JSON 数 据 对 象 如 下 所 示 : 


{ 

username: "wt", 
times: 1 

} 


对 象 中 包含 两 个 属性 : usename 和 times，username 为 "wt"，times 为 1。 后 台 服务 器 会 将 
这 些 数据 转换 成 字符 串 发 送 给 前 台 页 面 ， 前 台 页 面 在 接收 到 这 些 数 据 后 可 以 使 用 aecode ( ) 函数 
进行 如 下 处 理 ， 如 下 面 的 代码 所 示 。 


function successEn{(response,options){ 
Var obj= Ext .decode (response .responSeText) :; 


alert (obj .username); 


} 
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我 们 先 通过 response .reponseText 获 得 后 台 服 务 器 端 返回 的 响应 数据 , 这 个 响应 数据 是 符 
合 JSON 格 式 要 求 的 字符 串 。 只 要 解析 这 段 JSON 字 符 串 ， 就 可 以 得 到 JavaScript 的 对 象 ， 之 后 就 可 
以 像 操 作 普 通 对 象 一 样 从 它 里 面 获得 需要 的 数据 。 

我 们 先 用 Ext .decoadae () 函数 对 响应 数据 进行 解码 ， 得 到 结果 对 象 obj， 然 后 从 obj 中 获得 
username 属 性 ， 最 终 得 到 的 就 是 从 服务 器 端 传递 过 来 的 username 的 参数 值 "wt"。 


11.1.5 extend 函数 


在 介绍 Ext .extena() 函数 之 前 , 我 们 先 来 看 一 下 如 何 使 用 传统 方式 在 JavaScript 中 实现 类 的 
继承 操作 。 
首先 定义 一 个 父 类 ， 如 下 面 代码 所 示 : 


var BaseClass = function() { 
// 未 实现 
3 


BaseClass.prototype.someMethod = function() 1 
// 未 实现 
4 


BaseClass.prototype.overridenMethod = function() f 
// 未 实现 
} 
在 上 面 代 码 中 ， 我 们 定义 了 一 个 名 为 Baseclass 的 类 ， 然 后 为 Baseclass 定 义 了 两 个 函数 ; 
someMethod() 和 overridenMethod() 。 然 后 定义 一 个 Baseclass 的 子 类 ， 可 以 直接 从 
BaseClass 中 继承 所 有 的 属性 和 函数 ， 如 下 面 的 代码 所 示 : 


var Subclass = function() { 
BaseClass.call (this}; 
上 


SubClass .prototype = new BaseClass () ; 


SubClass .prototype.newMethod = function{) { 
// 未 实现 
)} 


SubCclass.prototype .overridenMethod = function{) 1 
// 未 实现 

2 

在 上 面 代码 中 ，subclass 的 构造 函数 首先 调用 Baseclass 的 构造 函数 初始 化 数据 ， 然 后 通 
过 Subclass.prototype = new BaseClass() ;这 条 语句 让 subclass 类 获得 Baseclass 中 的 所 
有 属性 和 函数 ， 这 样 就 实现 了 JavaScript 中 的 继承 操作 。 在 此 之 后 ， 我 们 就 可 以 操作 subclass 的 
prototype， 为 子 类 添加 新 函数 或 者 覆 写 父 类 中 的 同名 函数 。 

在 EXT 中 使 用 Ext .extenad() 函数 实现 继承 功能 的 方法 如 下 面 的 代码 所 示 ; 


var SubClass = function() { 
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SubClass.superclass.constructor.call (this); 

Ry BaseClass, { 

newMethod : function() {}, 

overriddenMethod : function{) {} 

}; 

Ext .extend() 函数 提供 了 直接 访问 父 类 构造 函数 的 途径 ， 通 过 subclass.superclass . 
constructor.call (this) 就 可 以 直接 调用 父 类 的 构造 函数 ， 这 个 函数 的 第 一 个 参数 总 是 this， 
以 确保 父 类 的 构造 函数 在 子 类 的 作用 域 里 工作 。 

如 果 父 类 的 构造 函数 需要 传 入 参数 , 我 们 也 可 以 将 所 需 的 参数 直接 传递 给 它 ， 如 下 面 的 代码 
所 示 : 


SubClass.superclass.constructor.call(this, config):; 


这 样 ， 我 们 就 得 到 了 一 个 继承 了 父 类 的 所 有 属性 和 函数 的 子 类 。 在 EXT 中 ， 我 们 用 extena 
函数 可 以 轻易 实现 面向 对 象 程序 设计 中 的 继承 功能 。 


11.1.6 apply 函数 和 applyIf 函数 


Ext .apply 函 数 的 作用 是 将 一 个 对 象 中 的 所 有 属性 都 复制 到 另 一 个 对 象 中 ， 如 下 面 的 代码 
所 示 : 

var a= {desc; '123°'); 

var b= { desc: '456'},， 

Ext .apply (b, a):; 

alert (b.desc); 

Ext .applyIf 与 Ext .apply 的 作用 类 似 ， 它 们 的 区 别 在 于 ， 如 果 某 个 属性 在 目标 对 象 中 已 
经 存在 ， 则 Ext .applyIf 不 会 将 它 覆 盖 ， 如 下 面 的 代码 所 示 : 

var a= {desc: '123'}); 

Var b= { desc: '456°'); 

Ext .applyIf (b, a); 

alert(b.desc}):; 

最 后 显示 的 结果 是 : b.desc 的 值 依然 是 "456"，, 这 说 明 applyIf 函 数 不 会 破坏 对 象 中 的 初始 
数据 ， 这 在 某 些 情况 下 是 非常 有 用 的 。 





11.1.7 namespace 函数 


Ext .namespace 函 数 的 作用 是 把 传 入 的 参数 转换 成 对 象 ， 使 用 该 方法 的 主要 目的 是 区 分 名 
称 相同 的 类 ， 这 与 Java 中 的 package 的 作用 类 似 。 我 们 先 看 看 下 面 的 代码 ; 


namespace: function()t{ 
Var a = arguments, o = null, i, j, d, rt; 
for (i = 0; i < a.length; ++i) { 
d = a[li] .splitt("."); 
rt = dl0):; 
eval( "if (typeof ‘+rt+" == "undefined"){' +rt+ "= {};}jo='+rt+ ';'); 
for {(j = 1; j < d.length; ++j) { 
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o[d[j]] = ofldar[j]] ||{}; 
o = o[ld(j})]; 


} 
} 


从 上 面 的 代码 中 可 以 看 出 ， 如 果 传 入 的 字符 串 参数 是 以 “.” 分 隔 的 ，EXT 就 会 根据 定义 的 
结构 创建 多 个 对 象 ， 如 下 所 示 : 
Ext .namespace('system.corp'); 


在 上 面 的 代码 中 ， 我 们 共 创 建 了 两 个 对 象 ， 分 别 是 system 对 象 和 system.corp 对 象 。 其 中 
corp 对 象 是 作为 system 对 象 的 一 个 属性 被 创建 的 ， 这 相当 于 执行 了 下 面 的 代码 ; 


system = … {}; 
system,corp = “1{}; 


通过 namespace 函 数 ， 我 们 在 定义 自己 的 类 时 就 可 以 像 使 用 Java 中 的 包 一 样 直接 引用 一 长 串 
类 名 了 。 这 样 可 以 保证 每 个 人 定义 的 类 都 放 在 不 同 的 命名 空间 中 ， 避 免 了 命名 冲突 。 

Ext .namespace('system.corp'); 

system.corp.ManageCorp = function() …{ 

/7 未 实现 

} 

如 果 还 想 定义 一 个 名 为 ManageCorp 的 类 ， 可 以 使 用 不 同 的 namespace 来 进行 区 分 ， 这 样 两 
个 类 就 不 会 冲突 了 ， 如 下 面 的 代码 所 示 : 

Ext .namespacel{'system.admin'); 

System.admin.ManageCorp = function() ™…-1{ 


/ /未 实现 
} 


还 可 以 直接 使 用 namespace 函 数 的 简写 形式 ns ()， 如 下 所 示 : 

Ext .ns{'system.admin'); 

还 可 以 同时 为 namespace 函 数 传 递 多 个 参数 ,这 样 就 可 以 同时 创建 多 个 命名 空间 , 供 以 后 的 
操作 使 用 ， 如 下 所 示 : 


Ext .ns{'system.admin', 'system.corp'); 


11.1.8 ”Ext .isEmpty 函数 


isEmpty{) 消 数 可 以 判断 传 入 的 参数 值 是 否 为 室 ， 当 参数 值 为 nu11、undefined 或 空 字符 
串 时 ，isEmpty () 函数 会 返回 true， 否 则 会 返回 false。 下 面 我 们 对 不 同 参 数值 的 情况 进行 逐 
一 分 析 。 

口 当 参 数 为 hull 时 ，isEmpty () 返回 true， 如 下 面 的 代码 所 示 : 


var param = null; 
alert('param = null, isEmpty: " + Ext.isEmpty (param) ); 


口 当 参 数 为 undefined 时 ，isEmpty() 返 回 true， 如 下 面 的 代码 所 示 ; 
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delete param; 
alertl("param = undefined, isEmpty: ”+ Ext.isEmpty (param)); 


D 当 参 数 为 空 字符 串 时 ，isEmpty() 返 回 true， 如 下 面 的 代码 所 示 : 
Var param = ''} 
alert ("param = '', isEmpty: " + Ext.isEmpty (param)}; 
口 还 可 以 使 用 allowBlank 参 数 ， 让 isEmpty() 在 空子 符 串 时 返回 false， 如 下 面 的 代码 
所 示 : 
alert{("param = '', allowBlank, isEmpty: ”+ Ext.isEmpty (param, true)); 


口 isEmpty () 无 法 判断 一 个 数组 是 否 为 定 ， 因 此 ， 无 论 数 组 是 否 为 宝 ， 它 都 会 返回 false， 
如 下 面 的 代码 所 示 : 


param = []; 
alert ("param = [], isEmpty: ”+ Ext.isEmpty {param)); 


D isEmpty() 无 法 判断 一 个 对 象 是 否 为 定 ， 因 此 ， 无 论 对 象 是 否 为 宝 ， 它 都 会 返回 false， 
如 下 面 的 代码 所 示 : 


param = {}; 
alert{("param = {}, isEmpty: " + Ext.isEmpty (param)); 


上 面 的 内 容 讨 论 了 使 用 isEmpty() 判 断 变量 值 是 否 为 空 的 情况 , 实际 开发 中 我 们 可 以 直接 使 
用 它 判 断 使 用 的 变量 是 否 为 空 。 
示例 文件 在 11.utiy 01 01_ 08.html 中 。 


11.1.9 Ext .each 函数 


当 需 要 对 数组 中 的 每 个 元 素 进 行 同一 种 操作 时 ， 可 以 使 用 Ext .each() 函数 ， 它 会 迭代 循环 
数组 ， 将 每 个 元 素 都 传 入 预先 定义 的 回调 函数 中 进行 处 理 。 
可 以 使 用 Ext .each () 函数 对 整数 数组 中 的 数据 执行 求 和 操作 ， 如 下 面 的 代码 所 示 : 


var array = {1, 2, 3, 4]; 

oe onc function(item) { 
sum += item; 

]) 1; 

alert (Sum) ; 

Ext .each () 函数 会 迭代 循环 array 数 组 , 将 array 数 组 中 的 元 素 依 次 传 入 我 们 定义 的 回调 函 
数 中 处 理 。 回 调 函 数 中 的 item 参 数 代表 的 就 是 每 次 循环 获得 的 array 数 组 中 的 元 素 ， 我 们 将 获得 
的 参数 依次 累加 到 sum 变 量 中。 整个 迭代 过 程 中 ， 回 调 函数 会 被 调用 4 次 ， 最 终 sum 中 得 到 的 就 是 
数组 中 所 有 元 素 的 总 和 。 

如 果 回 调 函 数 中 包含 chis 引 用 ， 就 需要 在 使 用 Ext .each() 函数 进行 迭代 循环 时 指定 回调 函 
数 执行 的 范围 ， 如 下 面 的 代码 所 示 : 


App = | 
sum: 10， 
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fn: function(item) { 
this.sum += item; 
} 
}; 
Ext .eachtarray, App.fn, App); 
alert (App. Sum); 


上 述 代 码 中 ， 我 们 的 回调 函数 定义 在 App 对 象 中 ， 它 需要 操作 App 的 sum 属 性 执行 累加 操作 。 
当 调 用 Ext .each () 函数 时 ， 就 需要 使 用 第 三 个 参数 将 app . fn 执行 的 范围 设置 为 app， 这 样 回 调 
函数 执行 时 才能 正确 获得 this 引 用 ， 将 数组 中 的 数据 累加 到 app 的 sum 属 性 中 。 

一 般 情 况 下 ， 回 调 函数 只 需要 获取 每 次 迭代 循环 得 到 的 元 素 值 。 不 过 有 时 也 需要 获得 当前 循 
环 的 案 引 值 ， 或 者 也 需要 在 每 次 迭代 循环 时 访问 整个 数组 中 的 数据 ， 这 时 可 以 使 用 Ext .each () 
为 回调 函数 预 留 的 另外 两 个 参数 ， 如 下 面 的 代码 所 示 : 


sum = 0; 
Ext .each{(array, function(item, index, allArray) ({ 
sum += item * index + allArray.length; (得 到 的 sum 是 哈 ) 
}) ; 
alert (Sum) ; 


这 次 回调 函数 中 使 用 了 3 个 参数 ，item 代 表 当 前 迭代 循环 得 到 的 元 素 ，inadex 代 表 当 前 的 循 
环 索引 值 ，allarray 代 表 正 在 执行 从 代 循环 的 整体 数组 。 这 样 每 次 循环 时 都 将 当前 的 元 素 值 乘 
以 循环 索引 值 ， 再 加 上 整体 数组 的 长 度 ， 将 计算 的 结果 累加 到 sum 变 量 中 。 

示例 文件 在 11.utiy 01_ 01 09.html 中 。 


11.1.10 Ext .DomQuery 


Ext .DomQuery 支 持 CSS 3 选择 器 的 大 部 分 功能 , 并 且 提 供 了 一 些 自 定 义 选择 符 , 它 还 能 支持 
基础 的 XPath。DomQuery 的 select () 函数 将 接受 我 们 定制 的 查询 表达 式 , 将 HTML 中 所 有 满足 条 
件 的 标签 作为 结果 返回 。 

假设 我 们 有 如 下 HTML 代 码 : 


<div id="rootl"> 
<span class="spanl">span 1l</span> 
<span class="span2">span 2</span> 
<span class="spanl">span 3</span> 
<span class="span2">span 4</span> 
<span class="spanl">span 5</span> 
</div> 
<div id="root2"> 
<span class="span0">span 0</span> 
</div> 


页 面 显示 效果 如 图 11-1 所 示 。 
可 以 用 DomQuery 获 得 页 面 上 所 有 的 span 标 签 ， 如 下 面 的 代码 所 示 : 
array = Ext.DomQuery .select('span'); 
Ext .each(larray, functionlelem) { 
elem.style.backgroundColor = ‘red'; 
Frys 
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将 查询 得 到 的 每 个 标签 的 背景 颜色 都 设置 为 红色 ， 页 面 显示 效果 如 图 11-2 所 示 。 






an 1 span 2 span 3 span 4 标签 的 背景 过 i apis 标签 的 消 景 
an 5 颜色 为 红色 | 颜色 为 红色 
an 0 | 


图 11-1 示例 HTML 代 码 显 示 效 果 图 11-2 ”改变 标签 背景 颜色 后 的 显示 效果 
也 可 以 获得 所 有 位 于 ia="root1l" 的 div 标 签 内 部 的 span 标 签 ， 如 下 面 的 代码 所 示 ; 


array = Ext.DomQuery.select('div#rooti>span’'); 

Ext .each{array, function(elem) ({ 
elem.style.color = 'yellow'; 

局， 


还 可 以 实现 更 复杂 的 功能 ， 比 如 获得 id="root1" 的 div 下 所 有 class 为 span1 的 span 标 签 ， 
如 下 面 的 代码 所 示 : 


array = Ext.DomQuery.select('div#rootl>span.spanl'); 

Ext .each{array, function(elem) { 
elem.style.backgroundColor = ‘green'; 

})» 


在 执行 批量 查询 和 批量 更 新 操作 时 ，DomQuery 无 疑 是 最 佳 选择 。 下 面 我 们 来 看 一 下 
Domouery 支 持 的 选择 符 和 伪 类 ， 以 及 这 些 选 择 符 和 伪 类 的 含义 。 
1. 元 素 选 择 符 
口 *; 匹配 所 有 元 素 。 
9 _E: 匹配 标签 名 为 E 的 元 素 ， 如 <E></E>。 
口 E F; 匹配 所 有 包含 在 E 标 签 中 的 F 标 签 元 素 ， 如 <E><F></F></E> 中 的 <E> 标 签 。 
口 E>F or E/F: 匹配 所 有 包含 在 E 标 答 中 ， 作 为 直接 子 节点 的 F 标 签 元 素 ， 如 E>F 只 能 匹配 
<E><F></F></E> 中 的 <E> 标 签 而 不 能 匹配 <E><C><F></F></C></E> 中 的 <E> 标 签 。 
口 E+F: 匹配 所 有 直接 前 驱 节 点 为 F 标 签 的 E 标 签 ， 如 E+F 只 能 匹配 <E></E><F></F> 中 的 <E> 
标签 ， 而 不 能 匹配 <E></E><C></C><F></F> 中 的 <E> 标 签 。 
口 E~F: 匹配 所 有 前 驱 兄弟 节点 为 标签 的 E 标 签 ， 如 E 一 F 既 能 匹配 <E></E><F></F> 中 的 
<E> 标 签 ， 也 能 匹配 <E></E><C></C><F></EF> 中 的 <E> 标 签 。 
2. 属性 选择 符 
@ 和 单 引号 都 是 可 选 的 ，div【8foo='bar'] 和 div[foo=bar] 这 两 种 写法 都 是 有 效 的 。 
口 E[f00]: 匹配 所 有 拥有 foo 属 性 的 <E> 标 签 ， 如 <E foo=""></E>。 
Q E[foo=bar]: 匹配 所 有 foo 属 性 值 为 bar 的 <E> 标 签 ， 如 <E foo="bar"></E>。 
口 E[foo^=bar]: 匹配 所 有 foo 属 性 值 以 bar 开 头 的 <E> 标 签 ， 如 <E foo="barxx"></E>。 
口 E[foos=bar]: 史 配 所 有 foo 属 性 值 以 bar 结 尾 的 <E> 标 签 ， 如 <E foo="xxbar"></E>。 
口 
口 





E[foo*=bar]: 匹配 所 有 foo 属 性 值 中 包含 par 的 <E> 标 签 ， 如 <E foo="xxbarxx"></E>。 
E[foo%=2]: 匹配 所 有 foo 属 性 值 可 以 被 2 整除 的 <E> 标 签 ， 如 <E foo="4*><E>。 
口 E[foo!=bar]: 匹配 所 有 foo 属 性 值 不 为 bar 的 <E> 标 签 ， 如 <E foo="xx"></E>。 
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3. 伪 类 

0 E:first-child: 匹配 所 有 当前 标签 是 本 身 父 节 点 的 第 一 个 子 节点 的 元 素 ， 对 应 
<E><first></first><second></second><last></last></E> 中 的 <fisrt> 标 签 。 

QE:last-child: 匹配 所 有 当前 标签 是 本 身 父 节点 的 最 后 一 个 子 节 点 的 元 素 ， 对 应 
<E><first></first><second></Second><last></1ast></E> 中 的 <1ast> 标 签 。 

D E:nth-child(n): 匹配 所 有 当前 标签 是 本 身 父 节点 的 第 n 个 子 节点 的 元 素 (索引 从 1 开始 
计算 )， 如 BE:nth-child(2) 将 获得 第 二 个 子 节点 ， 对 应 <E><first></first><second> 
</Second><last></1ast></E> 中 的 <secondq> 标 签 。 

D E:nth-child(oqd): 匹配 所 有 当前 标签 是 本 身 父 节点 的 奇数 子 节点 的 元 素 ， 对 应 <E> 
<first></fixrst><seconG></second><last></1ast></E> 中 的 <first></first> 和 
<last></last>。 

Q E:nth-child(even): 匹配 所 有 当前 标签 是 本 身 父 节点 的 偶数 子 节点 的 元 素 ， 对 应 
<E><first></first><Secondq></second><last></1ast></E> 中 的 <secondq> 标 签 。 

9 E:only-chila: 匹配 所 有 当前 标签 是 本 身 父 节点 的 唯一 子 节 点 的 元 素 ， 只 对 应 
<E><only></only></E> 形 式 的 <E> 标 签 。 

口 E:checked: 匹配 所 有 当前 标签 的 check 属 性 为 true 的 元 素 〈 比 如 单 选 框 或 复 选 框 ) ， 
如 <E><input type="checkbox"” checked></E> 中 的 <E> 标 签 。 

口 E:first: 当前 标签 为 结果 集 的 第 一 个 元 素 ， 如 <E id="el"></E><E id="e2"></E><F 
id="e3"></E> 时 ，E:first 返 回 的 是 id 为 el 的 <E> 标 签 。 

口 E:last: 当前 标签 为 结果 集 的 最 后 一 个 元 素 ， 如 <E id="el"></E><E id="e2"></E><E 
id="e3"></E> 时 ，E:1last 返 回 的 是 id 为 e3 的 <E> 标 签 。 

D E:nth(n); 当前 标签 为 结果 集 的 第 n 个 元 素 (索引 从 1 开始 计算 ), 如 <E id="el"></E><E 
id="e2"></E><E id="e3"></E> 时 ，E:nth(2) 返 回 的 是 id 为 e2 的 <E> 标 签 。 

D E:oda: 当前 标签 为 结果 集中 位 于 奇数 位 置 的 元 素 ， 如 <E id="el"></E><E 
id="e2"></E><E id="e3"></E> 时 ，E:od9d 返 回 的 是 id 为 el1 和 e3 的 <E> 标 签 。 

DE:even: 当前 标签 为 结果 集中 位 于 偶数 位 置 的 元 素 ， 如 <E id="el"></E><E 
id="e2"></E><E id="e3"></E> 时 ，E:even 返 回 的 是 id 为 e2 的 <E> 标 签 。 

OO E:contains (foo): 标签 的 innerHTML 属 性 值 包含 "foo"， 如 <E>xxfooxx</E> 。 

D E:nodevalue (foo) : 标签 的 textValue 或 nodevalue 值 为 "foo"， 如 <E>foo</E>。 

口 E:not (S): 标签 不 匹配 简单 选择 符 S， 如 <E class="el"></E><E class="e2"></E><E 
class="e3"></E>，BE:not(E.el) 返 回 的 是 class 为 e2 和 e3 的 <E> 标 签 。 

O E:has(S) : 标签 有 一 个 后 继 与 简单 选择 符 s 匹 配 ， 如 E:has(F.f) 会 匹配 <E><F 
class="f"></F></E> 中 的 <E> 标 签 。 

Q E:next (S): 标签 的 后 一 个 兄弟 标签 与 简单 选择 符 s 匹 配 ， 如 E:next (F.f) 会 匹配 
<E></E><F class="f"></F> 中 的 <E> 标 签 。 

Q E:prev(S): 标签 的 前 一 个 兄弟 标签 与 简单 选择 符 s 匹 配 ， 如 E:prev(F.f) 会 匹配 <F 
class="f"></F><E></E> 中 的 <E> 标 签 。 
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4. CSS 值 选择 符 

D Etdaisplay=none}: 匹配 所 有 (CSS 的 "display" 值 为 "none" 的 元素， 如 <Estyle 
="display:none"></E>。 

口 E{display^=none}; 匹配 所 有 CSS 的 "display" 值 以 "none" 开 头 的 元 素 ， 如 <Estyle 
="display:nonexx"></E>。 

D p{display$=none}: 匹配 所 有 CSS 的 "display" 值 以 "none" 结 尾 的 元 素 ， 如 <Estyle 
="display: none"></E>。 

口 Ep{display*=none}: 匹配 所 有 CSS 的 "qisplay" 值 包含 "none" 的 元 素 ， 如 <Estyle 
="QisplLlavy:xnoneXXx"></E>。 

D E{display%=2}: 匹配 所 有 CSS 的 "display" 值 能 被 2 整除 的 元 素 ， 如 <Estyle 
="display:4"></E>。 

口 E{display!=none}: 匹配 所 有 CSS 的 "qisplav" 值 不 为 "none" 的 元 素 ， 如 <Estyle 
="display:xx"></E>。 

了 解 了 Domouery 所 支持 的 上 述 CSS 选 择 符 和 伪 类 之 后 ， 我 们 可 以 调用 它 提供 的 功能 函数 处 

理 对 应 的 问题 。Domouery 主 要 提供 了 以 下 7 个 功能 函数 。 

D compile() 函 数 的 作用 是 将 CSS 选 择 符 编译 成 一 个 回调 函数 , 用 户 可 以 为 回调 函数 传递 一 
个 root 参 数 ， 回 调 函 数 就 会 以 root 参 数 对 应 的 元 素 为 起 点 进行 查询 。 

D filter() 函 数 会 根据 指定 的 CSS 选 择 符 把 数组 中 不 匹配 的 元 素 过 滤 掉 。 

D is() 函数 会 使 用 CSS 选 择 符 与 传 入 的 元 素 进行 匹配 ， 如 果 匹 配 成 功 就 返回 true， 否 则 返 
回 Ealse。 

D select () 会 根据 CSS 选 择 符 和 root 根 节点 返回 匹配 的 元 素数 组 。 

口 selectNode() 、selectNumber() 、selectValue() 获得 的 都 是 单一 结果 ， 其 中 
selectNodae () 国 数 返 回 节 点 对 象 , selectValue() 函数 返回 节点 的 值 , selectNumber () 
函数 将 节点 的 值 转换 成 数字 再 返回 给 用 户 。 


11.2 使 用 DomHelper 和 Template 动态 生成 HTML 


使 用 DOM 的 原生 API 动 态 生 成 HTML 一 直 是 一 件 令 人 头疼 的 事情 。 在 EXT 中 ， 几 乎 所 有 组 件 
都 是 动态 生成 的 ， 现 在 我 们 就 来 看 看 EXT 是 如 何 动态 生成 HTML 的 。 


11.2.1 使 用 DomHelper 生成 小 片段 

DomHelper 可 以 帮助 我 们 快速 生成 小 块 的 HTML 内 容 , 很 多 情况 下 都 可 以 直接 使 用 它 来 实现 
动态 生成 HTML 内 容 的 功能 。 先 来 看 看 下 面 这 段 代码 : 

Var list = Ext.DomHelper.append( 'parent', {tag: ‘'div', cls: ‘red'}}); 

这 段 代 码 表示 向 id="parent" 的 元 素 中 添加 一 个 aiv 元 素 ， 并 且 为 这 个 aiv 指 定名 为 “req” 
的 CSS 样 式 。 

根据 文档 里 的 描述 ，DomHelper .append() 函数 的 第 二 个 参数 都 会 成 为 新 生成 的 元 素 的 属 
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性 ， 只 有 4 个 特殊 的 属性 除外 ， 如 下 所 述 。 

D tag: 指定 生成 的 标签 类 型 ， 如 aiv 和 span 等 。 

D cls: 表示 HTML 标 签 中 的 class 属 性 ， 因 为 class 是 JavaScript 的 关键 字 ， 所 以 不 能 直接 
使 用 。 实 际 上 ， 当 用 DOM 为 元 素 设 罢 class 属 性 时 ， 应 该 使 用 classname。 为 了 方便 ， 
在 EXT 中 简写 成 了 cl1s? 。 

9 children: 指定 子 节 点 ， 它 的 值 是 一 个 数组 ， 数 组 中 包含 了 对 相应 子 节点 的 定义 。 

D html: 对 应 标签 的 innerHTML 值 ,如果 觉得 用 childaren 描 述 太 烦琐 , 也 可 以 直接 使 用 html 
设置 标签 内 包含 的 HTML 内容 。 

除了 append 之 外 ，DomHelper 还 有 其 他 几 个 函数 ， 通 过 它们 可 以 指定 将 新 节点 添加 到 DOM 

中 的 各 个 位 置 。 

为 了 比较 效果 , 我 们 先 制作 一 个 初始 页 面 , 如 。 | 2 Set Se 


图 11-3 所 示 。 i 
原始 的 HTML 是 一 个 div， 它 下 面 有 4 个 节点 ， poy hd 


其 中 第 三 个 子 节点 还 有 自己 的 子 节点 , 如 下 面 的 代 
码 所 示 : 图 11-3 ”测试 DomHelper 的 初始 页 面 


- 





<div id="parent" style="border: 1lpx solid black;padding: Spx;margin: 5px;background: 
lightgray;"> 

<p id="childi">child1l</p> 

<p id="child2">child2</p> 

<div id="child3"> 

<p id="child5">inner child</p> 

</div> 

<p id="child3">child4</p> 
</div> 


(1) DomHelper .append() 函数 会 将 新 生成 的 节点 放 到 指定 节点 的 最 后 面 。 

下 面 的 代码 将 在 ia="parent" 的 节点 的 最 后 面 添加 一 个 <p> 标 签 ， 并 设置 了 新 生成 的 标签 的 
CSS 样 式 和 内 部 显示 的 HTML 内容 。 

Ext .DomHelPer .append( 'parent', {tag: 'p', cls: 'red', html: “append child'}); 

上 述 代 码 的 效果 如 图 11-4 所 示 。 

(2) DomHelper .insertBefore() 函数 会 将 新 生成 的 节点 插入 到 指定 节点 前 面 。 

下 面 的 代码 将 在 ia="parent" 的 节点 前 面 添加 一 个 <p> 标 签 ， 并 设置 了 新 生成 的 标签 的 CSS 
样式 和 内 部 显示 的 HTML 内 容 。 

Ext .DomHelper.insertBeforel('parent', {tag: 'p' ,cls: ‘red' ,html:'insert before chilad' }) 


上 述 代 码 的 效果 如 图 11-5 所 示 。 


QD 在 EXT 中 ， 类 似 这 样 的 简写 很 多 ， 例 如 DataStore 简 写 为 ds，DomHelper 简 写 为 ah， Element 简 写 为 el， 
ColumnModel 简 写 为 cm，SelectionMode1 简 写 为 sm。 
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11-4 append 图 11-5 insertBefore 


(3) DomHelper .insertaAfter{) 函数 会 将 新 生成 的 节点 插入 到 指定 节点 后 面 。 
下 面 的 代码 将 在 ia="parent" 的 节点 后 面 添加 一 个 <p> 标 签 ， 并 设置 新 生成 标签 的 CSS 样 式 
和 内 部 显示 的 HTML 内 容 。 


Ext .DomHelper .insertAfter('parent', {tag: 'p', cls: 'red', html: 'insert after child'}) 
上 述 代 码 的 效果 如 图 11-6 所 示 。 
(4) DomHelper .overwrite() 函数 会 替换 指定 节点 的 innerHTML 内 容 。 


下 面 的 代码 将 把 ia="chila3" 的 节点 的 内 容 替 换 成 一 个 <p> 标 签 ， 并 设置 了 新 生成 的 标签 的 
CSS 样 式 和 内 部 显示 的 HTML 内 容 。 


Ext .DomHelper .overwrite('child3', {tag: 'p', cls: ‘'red', html: ‘'overwrite child'}) 


上 述 代 码 的 效果 如 图 11-7 所 示 。 





图 11-6 insertAfter 1]-7 overwrite 


现在 我 们 来 讨论 一 下 属性 children 的 用 法 ， 如 下 面 的 代码 所 示 ; 


Ext .DomHelper .append( 'parent '，{ 
在 可 汪汪 

style: “background: white;list-style-type: disc;padding: 20px;', 
children: [ 

tag; "LE Btms Lt 

tag “5 DEmE L112*Y, 

{tag: "li hems "113"} 





] 
Fj 


上 述 代 码 的 结果 是 在 id="parent" 的 节点 中 添加 
一 个 ul 标签 ， 这 个 ul 标签 中 包含 3 个 1i 标 签 ， 如 图 11-8 
所 示 。 使 用 chilaren 属 性 ， 我 们 就 可 以 直接 生成 一 些 
复杂 的 DOM 结 构 。 





图 11-8 insertChildren 
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示例 在 1l,utiy02-01-01.html 中 。 


11.2.2 Ext .DomHelper .applyStyles 函数 


Ext .DomHelper 类 的 applyStvles1() 
函数 可 以 为 指定 的 DOM 元 素 设 置 指 定 的 Serer 
CSS 样 式 。 我 们 可 以 使 用 字符 串 、JSON 对 chi 


和 图 11-9 ”使 用 applystyles 设 置 指定 DOM 元 素 的 CSS 样 式 
上 例 分 别 为 3 个 DOM 元 素 设 置 了 背景 颜色 ， 
对 于 只 需要 设置 单一 样式 的 情况 ， 可 以 直接 使 用 字符 串 格式 的 参数 "background- 
color:red"， 如 下 面 的 代码 所 示 : 


Ext .DomHelper.applyStyles ("childi", "background-color:red;"); 


对 于 设置 多 种 样式 的 情况 ， 可 以 使 用 JSON 对 象 作为 参数 来 设置 CSS 样 式 ， 如 下 面 的 代码 所 示 : 


Ext .DomHelper .applyStyles("chilad2" ，({ 
‘background-color':'green', 
‘font-weight':'bold', 
'font-style':'italic', 
‘text-decoration':'line-through' 

}); 


对 于 需要 经 过 某 种 逻辑 计算 才能 决定 设置 何 种 CSS 样 式 的 情况 ， 可 以 使 用 一 个 回调 函数 作为 
参数 ， 不 过 这 个 回调 函数 返回 的 值 必须 符合 上 述 的 字符 串 或 JSON 对 象 类 型 的 参数 格式 ， 如 下 面 
的 代码 所 示 : 

Ext .DomHelper.applyStyles ("child3", function() { 

var time = new Date() .getTime!(}); 
if (time % 2 == 0) 1 
return "background-color:yellow"; 
} else { 
return "background-color:blue'; 
} 
Fy 


示例 在 11.utils/_01_02-01-02.html 中 。 


11.2.3” Template (模板 ) 


在 一 般 情况 下 ， 用 DomHelper 就 已 经 足以 。 但 是 在 某 些 复杂 的 情况 下 ,我们 还 是 需要 用 模板 
来 批量 生成 所 需要 的 HTML。 假设 有 这 样 一 种 情况 : 我 们 已 经 获得 了 一 个 包含 3 位 男性 和 2 位 女性 
的 信息 的 JSON 对 象 ， 现 在 需要 将 这 一 组 数据 生成 为 HTML 标 签 并 显示 到 页 面 中 ， 如 下 面 的 代码 
所 示 : 

var data = [ 

['1','male', 'namel', 'descnl'], 
['2','female', 'name2', 'descn2'], 
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'male', 'name3','descn3'], 
!'female', 'name4','descn4'], 
'male', ‘name5', 'descn5'] 


Mm 


竹 
[” 
] ; 

首先 定义 一 个 模板 ， 如 下 面 的 代码 所 示 : 
Var t = new Ext.Template!t 
让 
"toarzt0} <td>". 
<td>{1l}y</td>.; 
"tdst{t2}<ttds'. 
etartiisrE 人 ds 
Wy 
})} 
t.compile(); 
注意 ,模板 中 的 数据 索引 是 从 0 开始 的 ， 每 一 行 都 包含 4 个 元 素 ， 分别 对 应 JSON 中 每 一 行 的 4 
个 数据 。 创 建新 模板 后 ， 必 须 调用 compile() 函数 进行 编译 ， 现 在 可 以 通过 这 个 模板 生成 我 们 需 
要 的 HTML 内 容 了 ， 如 下 面 的 代码 所 示 : 
for (var 1 = 0; i < data.length; i++) { 


t.append('some-element', datal[i]}); 
} 


在 appena( ) 函数 中 ,第 一 个 参数 "some-element" 对 应 着 HTML 中 的 一 个 表格 ,如 下 面 的 代 
码 所 示 : 
<table border="1"> 
<tbody id="some-element "> 
<tr> 
<td>id</td> 
<td>sex</td> 
<td>name</td> 
<td>descn</td> 
</tr> 
</tbody> 
</table> 
这 样 , 我 们 使 用 EXT 提 供 的 模板 将 JSON 数 据 的 每 一 行 都 转换 er | 
为 HTML, 并 添加 到 指定 的 Table 标 签 中 , 最 终 的 显示 结果 就 是 包 sole panel EEC 
含 5 行 数据 的 表格 ， 如 图 11-10 所 示 。 2 femalenane2 descn2| 
除了 上 面 演示 的 情况 外 ， 我 们 还 可 以 在 定义 模板 时 使 用 8 male Eee 
Ext .util.Format 中 预定 义 的 格式 化 函数 对 原始 数据 进行 格式 和 femalepamedidescn4| 


最 常用 的 是 trim 和 ellipsis，trim 会 去 掉 字符 串 的 首尾 空 。 5 male nane5licscn5 

， 而 ellipsis 会 在 字符 长 度 超过 指定 长 度 时 自动 截断 字符 串 ， 图 11-10 template 生 成 的 结 
een pt 

在 模板 里 使 用 这 些 函 数 也 很 简单 ， 只 需 在 指定 数据 的 索引 后 使 用 冒号 和 函数 名 称 即 可 。 下 面 
的 示例 演示 了 如 何 对 第 2 列 和 第 3 列 数据 进行 Lrim 操 作 ， 并 限制 第 4 列 数据 最 后 只 显示 10 个 字符 ， 
如 下 面 的 代码 所 示 : 





Download at Pin5i.Com 


http://52pdf.taobao.com 


306 第 11 章 实用 工具 


Var t = new Ext .Template!l 
et» 
'<td>{0}</td>', 
'<td>{1:;trim}</td>', 
'<td>{2:trim}</td>', 
‘<td>{3:ellipsis(10})}</td>', 
J 
jj 
t.compile!(),; 


当然 ， 即 使 EXT 在 设计 时 考虑 得 再 周到 ， 也 不 可 能 兼顾 现实 开发 中 可 能 出 现 的 所 有 情况 。 幸 
运 的 是 ，EXT 准 备 了 一 个 自 定义 函数 的 接口 ， 我 们 可 以 通过 这 个 接口 实现 所 需 的 功能 。 例 如 ， 根 
据 性 别 的 值 在 页 面 上 显示 对 应 的 图 片 ， 实 现 过 程 如 代码 清单 11-2 所 示 。 


代码 清单 11-2 ”使 用 模板 的 自 定义 接口 


Var 七 = new Ext.Templatet 
和 
‘<td>{0}</td>"', 
'<td>{1:this.renderSex}</td>', 
‘<td>{2:trim}</td>', 
'<td>{3:ellipsis(10})}</td>"', 
TRE 
)} 
t.renderSex = function(value) { 
if {value == ‘'male') { 
return "<span style='color:red;font-weight:bold;'> 红 男 </span><img src=' USer_ 
male.png' />"; 
) else { 
return "<span style='color:green;font-weight:bold; '> 绿 女 </span><img SYC= " 
user female.png' />"; 
} 
}3} 
t.compile{); 
首先 ， 我 们 在 定义 模板 时 使 用 {1:this .renderSex} 的 方式 deex name ldescn 
指定 : 处 理 第 2 列 数据 时 必须 调用 我 们 自 定义 的 rendersex 函 数 。 1 红 男 访 hamel descnl 
然后 ， 为 创建 好 的 模板 添加 sendersex 函 数 ， 这 个 函数 的 参数 就 。 忆 际 女 提 nane2ldcscn2 


是 生成 模板 时 对 应 的 原始 数据 。 对 原始 数据 进行 处 理 后 ， 返 回 的 。 ”所 男人 hane3|descn3 
4 际 女 急 namedjdescn4 





数值 将 会 显示 在 页 面 中 。 4 睛 女 号 pane4descn 
驴 desc 
通过 自 定义 接口 ,我 们 实现 了 根据 性 别 显示 对 应 图 片 的 功能 ，。。 阿 男 她 Pene5 seen 
如 图 11-11 所 示 。 图 11-11 使 用 Template 自 定 
对 应 的 完整 代码 如 下 所 示 : 义 接口 的 效果 


Var data = [ 
[('1','male','namel', ‘descnl'], 
[12', 'female’ : ‘name2','descn2'], 
ee ee te 
['4','female', 'name4', 'descn4'], 
['5','male', 'name5', 'descn5'] 
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了 


var t = new Ext,Template!l 
eb 
‘<td>{0}</td>', 
'<td>{1:this.renderSex}</td>', 
'<td>{2:trim}</td>', 
‘<td>{3:ellipsis{10)}</td>', 
em 
) ; 
t.renderSex = function(value) { 
if (value == 'male') { 
return "<span style='color:red;font-weight:bold;'> 红 男 </span><img 
src='uSsSer_male.png' />"; 
} else { 
return "<span style='color:green;font-weight:bold;'> 绿 女 </span><img 
src='uSer_female.png' />"; 
} 
Ns 
t.compilel(); 


for (var i = 0; i < data.length; i++) { 
t,append{Ext .get{'some-element'), datal[li])}):; 
} 


示例 在 11.utiy02-02-01.html 中 。 


11.2.4 Ext .DomHelper .createTemplate 函数 


cteateTemplate() 函数 可 以 直接 创建 一 个 模板 对 象 ， 与 DomHelper 所 支持 的 DOM 对 象 相 
比 ， 模 板 显得 更 加 有 灵活。 下 面 我 们 来 看 看 如 何 使 用 createTemplate() 函数 将 DomHelper 和 
Template 这 两 种 HTML 生 成 方式 结合 起 来 ， 如 下 面 的 代码 所 示 ; 


Var tpl = Ext.DomHelper.createTemplate ( 
{tag: "tr", chiladren: { 
ttag: tas ttnls TOF 
{tagt ‘tar, hemLs {LPF}, 
{ag: ta", DemLy ‘(2)'E, 
CEags: ta; tmE: (3):+} 
] } 
度 ， 
tpl.compile()}); 


var data = [ 
['1','male', 'namel','descn1l'], 
['2','female', 'name2','descn2°'], 
['3','male', 'name3','descn3'], 
['4','female', 'name4', 'descn4°'], 
['5','male', 'name5', 'descn5'] 


for (var i = 0; i < Gata.length; i++) { 
tpl.append('some-element', datal[i]); 
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createTemplate() 方 法 接收 JSON 类 型 的 对 象 ,在 内 部 将 对 象 转换 成 HTML 片段， 随后 使 用 
HTML 片 段 生成 模板 对 象 ， 这 样 返 回 的 tp1 变 量 经 过 编译 就 可 以 在 后 面 的 代码 中 直接 使 用 了 。 用 
一 个 数组 作为 数据 源 ， 使 用 模板 将 生成 的 HTML 结 果 插 入 ia="some-element" 的 DOM 元 素 中 ， 
最 终 的 结果 如 图 11-12 所 示 。 


11.2.5 复杂 模板 XTemplate 









XTemplate 对 Template 的 功能 进行 了 增强 ，xTemplate Ba ee en 
不 仅 支 持 在 模板 内 部 使 用 子 模板 ， 还 具有 for 和 if 的 功能 ， I ale 。 panel descnl 





可 以 让 我 们 在 模板 中 实现 循环 和 判断 等 功能 。 [female hame2ldescn? 


i 3 2 B pale phame3 Hescn5 
ee 个 下 拉 框 ， 代码 如 下 penele anod encnd 


6 ale hameb Rescn5 
var data = { 





name: 's', 图 11-12 ”使 用 DomHelper .create- 
Se 5， | Template() 函数 生成 的 
options : 4 

{value: ' 河 北 '，text: ' 河 北 省 '}， HTML 片 段 的 结果 


{value: ' 唐 山 ' ，text: ' 唐 山 市 '}， 
{value: ' 路 北 '，text: ' 路 北 区 ']】 
] 
直入 


data 中 主要 包含 两 部 分 内 容 : 主体 部 分 的 name 和 size， 以 及 options 数 组 。 我们 希望 复制 
name 和 size 两 个 属性 并 赋予 <select> 标 签 , 然后 用 options 数 组 中 的 数据 生成 <select> 标 签 下 
的 <option>。 使 用 的 xTemplate 如 下 面 的 代码 所 示 : 


Var 上 = new Ext.XTemplate( 
"<Select name="{name}" size='"{size}">', 
'<tpl for="options"> 
<option value="{value:trim}">{text:ellipsis(10)}</option> 
ACEHLS. 
'</select>! 
四 


t.append('f', data); 


从 上 面 的 代码 中 可 以 看 出 ， 我 们 直接 用 {name} 和 {size} 的 方式 在 模板 中 指定 了 主体 部 分 的 
name 和 size。 随 后 ， 用 <tp1l> 标 签 定 义 了 一 个 子 模板 ， for="options" 属 性 表示 我 们 要 对 原始 
数据 中 的 options 属 性 执行 循环 操作 。 这 样 ， 子 模板 就 会 自动 调用 options 的 数据 ， 循 环 输出 为 


<option> 标 签 。 5 
上 面 演示 的 只 是 XTemplate 的 一 个 普通 功能 ， 现 在 我 们 来 看 看 它 更 强大 的 功能 。 
1. 操作 简单 数组 
var data = { 
es 


options: [' 河 北 省 '，' 唐 山 市 '，' 路 北 区 '] 
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Var 七 = new Ext .XTemplate!l 
“<Select name="{name}" size="{size}">', 
'<tpl for="options">', 
'<option value="{.:trim}">{.:ellipsis(10)}</option>', 
Cetpi>*., 
'</select>" 
) . 


我 们 将 data .options 中 的 数据 改 为 包含 3 个 字符 串 的 简单 数组 ， 子 模板 tpl 里 直接 使 用 { .} 
表示 数组 中 的 每 一 项 ， 默 认 的 格式 化 函数 依然 有 效 。 
2. 默认 选中 奇数 行 


var t = new Ext.XTemplate!( 
"<Select name="{name}" size="{size}" multiple>', 
'<tpl for=*options">'., 


‘<tpl if="*xindex % 2 == 0">"', 
‘<option value="{.:trim}">{.:ellipsis{10) }</option>"', 
"wit, 
'<tpl if="xindex % 2 == 1">’, 
"<option valuyue="{.:trim}" selected>{.:ellipsis(10})}</option>', 
eBls*. 
wDL 
'</select>' 


} 


因为 XTermmplate 中 没有 提供 else 功 能 ， 我 们 只 好 使 用 两 个 if 来 进行 条 件 判 断 。 这 里 使 用 的 
xindex 是 for 内 置 的 一 个 变量 ， 它 表示 当前 循环 项 的 索引 值 。 注 意 ，xindex 是 从 1 开始 计数 的 。 
3. 简化 判断 


Var 七 = new Ext.XTemplate! 
‘<select name="{name}" size="{size}" multiple>', 
'<tpl for="*options">', 


"<option value="{.:trim}"{{[xindex % 2 == 1 ? " selected" : es 
ellipsis(10))}</option>"', 
eile 
“<7Select> 


) ; 
我 们 直接 用 一 个 三 元 判断 替换 了 上 一 节 中 完 长 的 if 判断 ， 因 为 这 个 xindex 并 不 是 外 部 提供 
的 数据 ， 所 以 要 在 {} 中 再 加 上 一 个 [] ， 在 xTemplate 中 调用 内 部 变量 都 要 用 这 种 方式 。 

表 11-1 列 出 了 xTemplate 中 的 内 部 变量 以 及 它们 的 含义 说 明 。 


表 11-1 XxTemplate 中 的 内 部 变量 
六 -ES 和 cs ee II 





变量 名 说 阴 

values 当前 范围 内 的 变量 ， 每 次 使 用 时 tp1 都 会 进入 一 个 子 模板 ， 只 能 使 用 子 模板 对 应 的 变量 
Parent 如 果 进 入 了 子 模板 ， 就 需要 通过 parent 引 用 上 一 级 模板 里 的 变量 

xindex 循环 的 索引 值 ， 从 1 开始 

xcount 循环 的 总 长 度 

fm Ext .util .Format， 想 执行 格式 化 操作 ， 就 直接 调用 它 
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示例 在 11.utiy02-03-02.html 中 。 


11.3 ”用 Ext .Utils .CSS 切换 主题 


相信 大 家 对 EXT 精 美的 主题 风格 有 非常 深刻 的 印象 , 但 是 ， 再 精美 的 主题 风格 ,看 多 了 也 会 
审美 疲劳 。 所 以 ，EXT 为 我 们 提供 了 default 和 gray 两 种 主题 风格 。 如 何 才 能 在 页 面 中 动态 切换 
这 两 种 主题 风格 呢 ? 

因为 在 EXT 中 是 使 用 CSS 样 式 表 来 定义 页 面 的 显示 风格 的 ， 所 以 只 要 能 动态 修改 页 面 中 引用 
的 CSS 就 可 以 实现 主题 切换 。 现 在 ， 我 们 可 以 用 Ext .util1.css.swapStylesheet () 函数 来 实现 
CSS 切 换 ， 这 个 函数 会 动态 修改 指定 ia 的 CSS 标 签 ， 指 向 不 同 的 外 部 CSS 文 件 ， 从 而 修改 整个 项 
目的 样式 ， 这 样 就 达到 了 切换 主题 风格 的 目的 ， 具 体 的 操作 步骤 如 下 所 示 。 

(1) 制作 一 个 选择 主题 select， 如 下 面 的 代码 所 示 ， 

<Select id="themeSelect"> 

<option value="default">default</option> 


<option value="gray">gray</option> 
</select> 


(2) 为 这 个 select 添 加 监听 change 事 件 的 函数 ， 如 下 面 的 代码 所 示 ; 


Ext .get ("themeSelect") .on("change'", function(e) { 
Var V = 已 .上 arget .value; 


if (Vv == 'Gefault"') 1 

Ext .util.CSS,.swapStyleSheet ("theme'", "../,./resources/css/ext-all.css"); 
} else { 

Ext .util.CSsS.swapSstyleSsheet ("theme’", "../,../resources/css/xtheme-" + 


e.target .value + ".css"); 
} 
$s 


我 们 使 用 了 函数 Ext .get () 和 on()， 当 select 的 值 发 生 改变 时 ， 就 可 以 获得 用 户 选 择 的 主 
题名 称 ， 然 后 用 Ext .util .Css .swapStyleSheet 改 变 主题 样式 。 

(3) 给 HTML 添 加 一 个 空 的 CSS 标 签 ， 以 备 后 用 。 虽 然 这 个 标签 现在 是 空 的 , 但 是 在 调用 swap 
函数 时 它 就 会 起 作用 了 。 

<link id="theme" Zrel="SsStylesheet+ type="text/css'" href="*" /> 


示例 在 11.utiy03-01.html 中 。 

这 里 使 用 的 还 是 HTML 自 带 的 下 拉 框 select， 相 信 很 多 朋友 都 想 利 用 EXT 自 带 的 ComboBox 
来 实现 。 调 用 swapstylesheet() 函数 的 部 分 不 需要 改变 ， 只 要 创建 一 个 用 于 选择 主题 的 
ComboBox 即 可 ， 如 下 面 的 代码 所 示 : 

{ 

id: 'themeSelect', 
hiddenName: '‘'comboId', 
xtype: 'combo'!, 
fieldLabel: ' 组 合 框 ， 
triggerAction: 'all', 
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store: new Ext .data.Simplestorel(lt{ 
fields: ['value','text'], 
data;: [ 
['aefault'，' 默 认 风 格 ' ] ， 
{'gzray'，' 灰 色 空 间 ' ] 
] 
dy 
displayField: 'text', 
valuerField: 'value', 
mode: 'local', 
emptyText : ' 切换 皮肤 ' 
} 


这 里 使 用 的 就 是 EXT 的 ComboBox 来 实现 切换 主题 的 功能 , 在 第 4 章 中 已 经 讲解 过 它 的 使 用 方 
法 。 实 现 主 题 切 换 的 代码 如 下 所 示 : 


/ /切换 风格 
Ext .getCcmp{'themeSelect') .on{'select', function{combo){ 
if{combo.getValue()=='default')}t 


Ext .util.CSS.swapSstyleSheet ("theme", 
"*../../resources/ css/ext-all.css"); 
}elset 
Ext .util.CSS.swapStyleSheet ('theme ' ， 
"../../resources/ css/xtheme-" + combo .getValue() + '.css'); 
} 
Elz 


从 上 面 的 代码 中 可 以 看 出 ， 其 实 只 有 传 入 的 参数 发 生 了 改变 ， 传 入 的 是 ComboBox， 而 不 是 


select 下 拉 框 。 
示例 在 11.utiy03-01.html 中 。 


11.4 悬 停 提 示 


所 谓 悬 停 提示 ,就 是 当 鼠 标 停 在 某 个 组 件 上 方 时 会 出 现 一 个 提示 框 ，, 里 面包 含 的 内 容 是 对 这 
个 组 件 的 一 些 解释 性 描述 。 

EXT 遂 过 QuickTip 实 现 了 巷 停 提示 功能 ， 在 表格 的 header 部 分 、 树 形 的 node 部 分 和 表单 的 
field 部 分 都 可 以 见 到 它 。 它 不 仅仅 是 弹出 一 个 蓝 色 小 框 , 我 们 还 可 以 通过 ouickTip 为 悬 停 提 示 
定义 其 他 的 功能 。 


11.4.1 初始 化 

如 果 想 使 用 提示 功能 , 请 务必 先 用 Ext .QuickTips.init() 函数 进行 初始 化 。 只 有 在 进行 了 
初始 化 之 后 ， 我 们 才 可 以 激活 表格 、 树 形 、 表 单 和 自 定义 的 tip， 如 下 面 的 代码 所 示 : 

Ext .QuickTips.init{(); 

在 对 EXT 的 提示 体系 进行 初始 化 之 后 ， 就 会 立刻 激活 提示 功能 ， 必 须 在 创建 页 面 上 其 他 组 件 
之 前 对 QuickTip 进 行 初始 化 。Ext .QuickTips 还 包含 一 些 其 他 操作 ， 例如， 用 disable() 函数 禁 
用 提示 功能 、 用 enable() 了 邹 数 启用 提示 功能 、 用 register() 函数 为 DOM 元 素 注册 提示 功能 ， 
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以 及 用 unregister () 函数 取消 提示 功能 ， 所 有 这 些 操 作 都 只 有 在 初始 化 之 后 才能 执行 。 当 然 ， 
我 们 可 能 不 需要 执行 这 么 多 操作 ， 现 在 只 要 先 执行 init () 函数 的 操作 即 可 。 


11.4.2 ”注册 提示 


既然 已 经 说 到 了 register() 注 册 函 数 ， 我 们 就 来 看 看 如 何 给 一 个 DOM 元 素 添 加 提示 功能 。 

首先 需要 在 页 面 中 添加 一 个 标签 <input id="ql" type="button"” value=" 提 示 信 息 "/>。 
现在 所 必需 的 只 有 它 的 ia， 其 他 的 属性 暂时 与 提示 功能 无 关 。 

现在 我 们 就 为 这 个 button 注 册 提 示 信 息 ， 如 下 面 的 代码 所 示 : 


Ext .QuickTips, init(); 
Ext .QuickTips.register({ 
target: 'gl', 
teles “ 弟 二 型 
text: ' 从 外 部 注册 到 dom 里 的 提示 信息 ， 
es 
register () 函数 的 最 简 形式 只 有 3 个 参数 target 指定 给 哪个 DOM 元 素 注 册 提示 ; title 
和 text 是 显示 在 提示 框 中 的 信息 , 它们 的 区 别 是 默认 显示 的 位 置 和 样 
式 不 同 。 默 认 情况 下 ，title 的 值 会 被 加 粗 并 放 到 上 面 ，text 的 值 放 提示 信息 | 
在 下 面 ， 我 们 还 可 以 直接 使 用 HTML 来 控制 显示 的 格式 。 
设置 完成 后 ， 只 要 把 鼠标 放 到 按钮 上 一 会 儿 ， 就 会 出 现 这 个 提示 
了 ， 效 果 如 图 11-13 所 示 。 图 11-13 无 侵入 提示 


11.4.3 ”标签 提示 


上 一 节 讨论 了 如 何 使 用 Ext .QuickTips .register() 为 DOM 节 点 注册 提示 信息 ， 现 在 来 看 
“下 如 何 直 接 在 HTML 中 为 元 素 设置 提示 信息 。 
请 注意 ， 即 使 将 提示 信息 添加 到 HTML 中 ， 初 始 化 过 程 也 是 必需 的 。 现 在 我 们 就 来 看 看 如 何 
在 HTML 中 添加 提示 信息 。 


<input type="button" value=' 标 签 型 提示 信息 " 
ext :qtitle=" 提 示 的 标题 * 
ext :qtip="<b><i> 提 示 的 内 容 </i></b><p> 下 -~ 行内 容 。 </p>" /> 


这 些 配置 都 以 ext :作为 前 级 ，atit1le 代 表 提 示 标 里，qtip 代 表 提 示 内 容 ， 这 些 配置 会 在 初 
始 化 时 解析 到 EXT 中 ， 并 在 需要 时 显示 。 


11.4.4 全 局 配置 


默认 情况 下 ， 提 示 信息 会 在 鼠标 悬 停 0.5 秒 后 显示 ， 显 示 5 秒 后 消失 。 有 时 需要 修改 它 的 默认 
配置 ,最 简单 的 办 法 就 是 利用 Ext .apply() 函数 重新 设置 ouickTips 的 默认 属性 , 如 下 面 的 代码 
所 示 : 
Ext .apply (Ext .QuickTips, { 
maxWidth: 200, 


术 单一 至 
四 从 州 孝 这 硼 旨 dom 星 的 搞 示 信和 
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minWwidth: 100, 
showDelay: 50, 
dismissDelay: 1000, 
hideDelay: 500, 
trackMouse: false, 
animate: true 

}); 


下 面 来 看 看 这 些 设 置 的 含义 。 

D maxwidth 和 minwidth 分 别 用 来 设置 提示 框 的 最 大 宽度 和 最 小 宽度 , 这 可 能 会 导致 提示 内 
容 自 动 换行 。 

D showDelay 表 示 上 鼠标 悬 停 多 久 后 显示 提示 信息 ， 默 认 是 0.5 秒 ， 这 里 的 时 间 以 ms 为 单位 。 

Q daismissDelay 表 示 提 示人 信息 显示 的 时 间 ， 默 认为 5 秒 。 如 果 和 希望 提示 框 不 消失 ， 也 可 以 
将 dismissDelay 和 直接 设置 为 0。 

口 hideDelay 表 示 提 示 信 息 从 开始 消失 到 完全 消失 所 需 的 时 间 ， 默 认为 0.2 秒 。 

口 trackMouse 这 个 属性 很 有 意思 ， 如 果 把 它 设置 为 true， 提 示 窗 口 弹 出 来 以 后 还 会 跟随 鼠 
标 一 起 移动 。 

口 autoHidae 的 值 一 般 都 是 true， 它 会 根据 aismissDelav 和 hiaqepelay 的 数值 来 实现 逐渐 
消 隐 提 示 框 的 效果 。 这 似乎 也 是 一 条 让 提示 框 永 不 消失 的 捷径 ， 不 过 用 过 以 后 你 就 会 知 
道 ，autoHiae: false 的 结果 是 即使 鼠标 离开 了 DOM 的 范围 ， 提 示 信 息 也 不 会 消失 。 这 
个 提示 信息 会 一 直 挂 在 页 面 上 ， 再 也 无 法 去 掉 了 。 

D animate 表 示 是 否 使 用 动画 效果 。 


11.4.5 “个体 配置 


ouickTips 中 的 这 些 参数 既 可 以 用 于 全 局 配置 ， 也 可 以 用 于 对 某 个 组 件 进 行 单独 指定 ， 可 以 


为 某 一 个 DOM 的 提示 信息 设置 自己 的 配置 。 


单独 配置 有 两 种 方式 : 使 用 register () 和 直接 写 到 HTML 里 。 在 这 两 种 方式 中 ， 配 置 名 称 


稍 有 不 同 ， 但 也 有 规律 可 循 。 


(1) 使 用 registez () 函数 时 ， 用 到 的 参数 和 全 局 配置 一 样 ， 如 下 面 的 代码 所 示 : 


Ext .QuickTips,.reg9ister (1 
target: “G1 
title: "第 一 种 类 型 ' ， 
text: '， 从 外 部 注册 到 DoM 中 的 提示 信息 '， 
maxWidth: 200, 
minWwidth: 100, 
showDelay: 50, 
dismissDelay: 1000, 
hideDelay: 500, 
trackMouse: false, 
autoHide: false, 
anirmate: true 

L 


这 里 的 autoHide:false 与 之 前 讨论 的 有 所 不 同 ， 它 单独 设置 autoHide:false， 出 现 的 提 
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示 不 会 自动 消失 ， 但 会 给 用 户 提 供 一 个 关闭 按钮 ， 全 局 设置 中 的 参数 不 具备 这 项 功能 。 
(2) 标签 的 写法 不 同 ， 其 实 也 可 以 写成 一 样 的 ， 或 许 Jack 有 其 他 的 考虑 吧 。 
<input type="button"” value=" 自 以 为 是 标签 型 提示 信息 " 
ext:hide="user" 
ext:qclass="" 
ext:qwidth="300" 
ext:qtitle='" 标 题 " 
ext :qtip="<b><i> 内 容 </i></b><p> 直 接 写 到 标签 里 。</P>” /> 


这 种 标签 式 设置 有 着 很 大 的 局 限 ， 我 们 只 能 使 用 上 述 5 个 参数 ， 其 中 ext :hide="user" 的 情 
况 与 单独 配置 中 的 autoHide:false 的 效果 相同 。 其 他 参数 都 很 容易 理解 , 用 于 设置 样式 和 大 小 。 
示例 在 11.utiy04-01-01.html 中 。 
表 11-2 中 列 出 了 内 置 了 提示 功能 的 EXT 组 件 ， 只 需要 在 初始 化 QuickTips 之 后 ， 再 为 这 些 组 件 
设置 对 应 的 属性 ， 就 可 以 直接 为 它们 设置 对 应 的 提示 信息 。 
表 11-2 内置 了 提示 功能 的 组 件 和 它们 对 应 的 配置 





组 件 名 称 配 置 
Ext .tree.TreeNode qtip 
! Ext .Button tooltip 


11.5 ”使 用 Ext .state 保存 状态 


Ext . state 提 供 了 保存 组 件 状 态 的 功能 ， 如 果 不 了 解 它 的 内 部 实现 ， 可 能 会 遇 到 一 些 奇 怪 的 
问题 。 下 面 就 来 讨论 一 下 如 何 使 用 Ext .state， 以 及 如 何 避 免 使 用 过 程 中 可 能 遇 到 的 问题 。 

为 了 比较 ， 我 们 先 在 页 面 中 放 一 个 被 分 成 5 个 部 分 的 Viewport 布 局 和 一 个 弹出 窗口 ， 实 现 过 
程 如 代码 清单 11-3 所 示 。 
代码 清单 11-3 ”设置 Viewport 布 局 和 弹出 窗口 

Ext .onReady (function(){ 


Var viewport = new Ext .Viewportt{{ 
layout: 'border', 


items:[{ 
region: 'north', 
height: 50, 


split: true 


region: 'south', 
height: 50, 
split: true 


region: 'west', 
width: 50, 


split: true 


region: 'east', 
width: 50, 
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split: true 
十 
region: 'center' 
}] 
}); 


var Win = new Ext .Window!(t 
title: ‘title', 
width: 300, rm 
height: 200 


; 
win.show!(}):; 


网 区 


在 Viewport 布 局 中 ， 上 下 两 部 分 的 默认 高 度 都 是 50 
(像素 ) ， 左 右 两 部 分 的 默认 宽度 也 是 50〈 像 素 ) 。 弹 出 
窗口 宽 为 300〈 像 素 ) ， 高 为 200〈 像 素 ) ， 默 认 情 况 下 图 11-14 设置 Viewport 布 局 和 弹出 窗口 
出 现在 浏览 器 中 央 ， 整 体 效果 如 图 11-14 所 示 。 

我 们 为 Viewport 布 局 的 上 、 下 、 左 、 右 4 个 部 分 都 设置 了 split， 这 样 就 可 以 通过 拖 放 来 修 
改 它 们 的 宽度 和 高 度 了 。 弹 出 窗口 既 可 以 修改 大 小 ， 又 可 以 拖 放 ， 但 是 页 面 刷新 后 ， 窗 口 又 会 恢 
复原 状 。 接 下 来 ， 我 们 在 页 面 中 加 入 state， 如 下 面 的 代码 所 示 : 


Ext.state.Manager.setProvider{new Ext.state.CookieProvider{({})); 


注意 , 这 段 代 码 应 该 添加 到 创建 Viewport 和 Window 之 前 。 也 就 是 说 , 对 Ext . state.Manager 
的 初始 化 功能 必须 放 在 所 有 代码 的 最 前 面 ， 这 和 Ext .Quicktips 的 用 法 相似 。 

现在 拖 动 窗口 的 位 置 ， 并 调整 页 面 布局 ， 如 图 11-15 所 示 。 

然后 刷新 一 下 页 面 ， 结 果 布 局 和 窗口 的 位 置 和 大 小 都 没有 变化 。 是 我 们 眼花 了 ， 还 是 刚才 没 
有 点 中 刷新 按钮 ? 把 浏览 器 关 掉 ， 然 后 再 打开 这 个 页 面 看 看 。 奇 怪 了 ， 页 面 仍然 没有 任何 变化 。 
这 是 什么 原因 呢 ? 有 经 验 的 朋友 可 能 会 认为 是 页 面 缓存 的 引起 的 ， 但 是 清除 页 面 缓存 后 ， 页 面 仍 
然 没 有 变化 。 其 实 这 是 Cookie 引 起 的 ， 如 果 不 清 空 Cookie， 初 始 化 数据 就 不 会 起 作用 ， 页 面 布局 


就 不 会 变 。 
Cookie 里 究竟 藏 着 什么 玄机 ? 我 们 用 FireFox 来 查看 一 下 Cookie， 如 图 11-16 所 示 。 


您 的 计算 本 中 已 保存 的 cooke ; 


YS5-ext-comip-1D04 
Ys-ext-comp-1006 
ys-Gxt-COMD- 1008 





。 名称: ys-ext-comp-1005 
肉 容 : 09%63Awidithe3Drw253A156 
路 径 : / 


| 发 送 条 件 :生意 尖 型 的 连 扩 
| 过 94 亲 :2008 年 :月 19 日 20055 


图 11-15 ”调整 Viewport 布 局 并 拖 放 窗口 图 11-16 ”Cookie 中 的 秘密 
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这 些 以 “vs” 开 头 的 文件 就 是 EXT 为 我 们 保存 的 数据 ， 先 删除 它们 ， 然 后 再 刷新 一 下 ， 这 次 
布局 和 窗口 都 回 到 原 位 了 。 

其 实 原理 很 简单 , Ext . state 是 由 Manager 和 Provider 两 部 分 组 成 的 ,Manager 是 一 个 单 例 ， 
不 需要 每 次 都 创建 它 ， 需 要 它 时 ， 直 接 在 它 里 面 设置 provider 即 可 。 这 个 Provider 是 用 于 保存 
和 读 取 数据 的 功能 组 件 ， 默 认 情况 下 EXT 只 为 我 们 提供 了 一 个 Ext . state.Cookieprovider， 
它 会 把 组 件 的 状态 都 保存 到 用 户 浏览 器 的 Cookie 里 。 默认 情况 下 , 这 个 Cookie 会 保存 一 周 , Cookie 
的 path 和 domain 会 被 设置 为 当前 网 站 的 path 和 Gomain， 因 为 我 们 刚才 打开 的 网 页 是 在 本 地 的 ， 
所 以 这 时 设置 的 aomain 部 分 都 为 空 值 。 

修改 cookieProvider 上 默认 设置 的 方法 ， 如 下 面 的 代码 所 示 : 


Var cp = new Ext.state.CookieProvider{(t{ 
path; "/cgi-bin/*, 
expires: new Date(new Date() .getTime()+(1000*60*60*24*30))，//30 天 
domain: "ext]js.com" 
be 
参数 path 和 domain 都 是 字符 串 ，expires 表 示 过 期 时 间 ， 是 在 当前 时 间 上 加 上 7 天 得 到 的 。 
实际 使 用 中 ， 过 期 时 间 可 以 自行 计算 。 
EXT 在 运行 时 , 支持 state 的 组 件 首先 会 判断 Ext . state.Manager 是 否 进行 了 初始 化 。 如 果 
有 必要 ， 就 调用 state 中 的 数据 对 自己 的 属性 进行 修改 。 顺 便 提 一 句 ， 所 有 Ext .component 都 支 
持 从 state 中 获取 状态 。 
我 们 已 经 看 到 了 ， 在 Cookie 中 保存 的 状态 信息 都 是 以 “ys ”开头 的 字符 串 ，“ys” 后 面 的 部 
分 是 组 件 的 ia。 而 EXT 组 件 的 id 很 多 都 是 自动 生成 的 ， 既 然 是 自动 生成 的 ， 就 可 能 会 有 重复 ， 一 
且 出 现 重 复 ， 就 会 出 错 。 可 以 想象 一 下 ， 如 果 之 前 在 测试 页 面 中 使 用 过 cookieprovider， 浏 览 
器 中 就 会 保存 一 些 组 件 的 状态 信息 。 如 果 之 后 又 在 其 他 页 面 里 使 用 state， 那 么 这 个 页 面 就 会 把 
上 次 保存 的 状态 都 取出 来 。 如 果 正 好 遇 到 id 相同 的 情况 ， 就 会 出 现 问题 。 这 个 页 面 上 创建 的 
Window 的 id 可 能 正好 与 上 个 页 面 中 创建 的 ViewPort 的 ia 是 相同 的 ,这 个 页 面 上 的 Window 就 会 从 
state 中 取出 上 次 保存 的 宽度 和 高 度 ， 这 样 一 来 ， 显 示 结 果 就 会 错 得 很 离谱 。 
为 了 避免 这 个 问题 ， 不 应 该 让 EXT 自 动 为 组 件 匹配 state 中 的 属性 。 我 们 推荐 使 用 statera 
参数 ， 为 这 个 参数 设置 一 个 不 容易 重复 的 名 字 ， 这 样 就 不 容易 出 现 上 述 问 题 了 。 


{ 
stateIid: ‘viewPortNorth', 
region: 'north' ， 
height: 50, 
split: true 
} 


上 面 的 代码 中 ， 我 们 为 组 件 配 置 了 stateId: 'viewPortNorth'， 通 过 state 保 存 到 Cookie 
里 的 key 就 会 变 成 ys-viewPortNorth， 这 样 就 不 容易 产生 冲突 了 。 

经 过 上 面 的 讨论 , 我 们 了 解 了 如 何在 实际 工作 中 使 用 state 保 存 组 件 的 状态 , 也 讨论 了 state 
可 能 造成 的 问题 ， 以 及 避免 这 些 问 题 的 方法 ， 大 家 可 以 在 实际 开发 过 程 中 酌情 采用 。 
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示例 在 11.uti/05-01.html 中 。 


11.6 ”使 用 fx 实现 的 动画 效果 


如 果 打 开 EXT 发 布 包 中 的 sources 目 录 ， 就 会 在 core 目 录 下 看 到 一 个 名 为 fx.js 的 脚本 文件 。 它 
是 专门 用 来 管理 动画 效果 的 脚本 ， 不 过 EXT 已 经 将 这 些 动 画 效果 合并 到 Element 中 了 ， 我 们 可 以 
直接 在 得 到 的 el 上 调用 fx.js 中 已 经 定义 好 的 动画 效果 。 

fx.js 脚 本 中 定义 了 多 种 动画 效果 ， 包 括 渐 入 渐 出 、 突 出 显 表 11-3 anchor 参数 列表 
示 、 改 变 大 小 、 闪 烁 等 。 每 种 动画 效果 都 可 以 在 对 应 函数 的 数 值 说 了 明 


options 参 数 中 指定 附加 属性 ， 其 中 duration 表 示 持 续 时 间 ， ee 
zemove 表 示 是 否 在 消失 后 彻底 删除 DOM, callback 代 表 在 动 9 
画 效 果 显 示 完 毕 后 执行 的 回调 函数 ， 等 等 。 本 右上 
我 们 还 可 以 通过 anchor 参 数 ， 指 定 在 某 个 方向 上 实现 动画 5 大 
效果 ， 表 11-3 中 列 出 了 可 选 的 参数 值 。 右 
在 指定 了 anchor 参 数 之 后 , 实现 的 动画 效果 会 根据 我 们 定义 et 大 下 
的 方向 展开 ， 我 们 可 以 在 这 8 个 方向 中 任 选 其 一 。 下 
fx.js 中 还 包含 了 一 些 其 他 功能 函数 ， 比 如 pause () 函数 可 以 ji 右 下 
指定 暂停 几 秒 后 执行 下 一 个 动画 效果 ，syncFx() 函数 表示 立即 
执行 所 有 动画 效果 。 


随 书 示例 中 演示 了 EXT 所 支持 的 全 部 动画 效果 ， 代 码 如 下 所 示 : 


Ext .onReady (function(){ 
Var fx = Ext.get("fx01'y; 
var log = Ext.get('log');: 


fx.pause(l1); 
log.updatel('fadeOQut ()}'); 
fx,fadeOut({ 
callback: function() { 
log.updatel'fadeIn{)'); 





} 
3 


fx.pause{1):; 
fx.fadeInl(t{ 
callback: function() ({ 
log.updatel('frame()'}); 
} 
E> 


fx.pause(l1); 
fx,.frame('green', 1, 
callback: function() { 
log.update('ghost()'); 
} 
J 
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fx.pause(l1); 
fx.ghost('t', { 
callback: function() { 
log.update('highlight()}'); 
fx.show (上 rue) : 


为 愉 


fx.pause(l1); 
fx.highlight ("O000ff*", { 
callback: function() { 
log.updatet{'puff()'); 
fx.show(true); 


3 


fx.pause(1); 
fx.puffl(t{ 
remove: false, 
callback: function() { 
log.updatel('scale(}'); 
fx.show(true); 


二 ] 


fx.pause(1); 
fx.scale(100, 100, { 
callback: function{) { 
log.update('shift()'); 
} 
}); 


fx.pause(l1}; 
fx.shift!(t 
callback: function{) ({ 
log.update('slideOut()'); 
} 
}); 


fx.pause(1),; 
fx.slideOout{'tl', { 
callback: function{() { 
log.update('slideIn()}'); 
} 
}); 


fx.pause(1l); 
fxsrelidern( teres 
callback: function(} { 
log.update('switchOoff()'); 
} 
}); 
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fx.pause(l1); 
fx.switchOoff(t 
callback: function() 1 
log.update('done...'); 
} 
})s 


六 区 
示例 在 11.utiy06-01.html 中 。 


11.7 局 部 更 新 网 页 内 容 


利用 Ajax 局 部 更 新 网 页 内 容 的 知识 在 这 里 就 不 效 述 了 ， 我 们 来 看 一 下 EXT 提 供 的 方式 。 在 
EXT 中 ， 不 但 将 这 一 连 串 的 操作 封装 到 了 一 起 ， 而 且 还 提供 了 许多 高 级 功能 。 

先 看 一 下 页 面 上 的 效果 ， 如 图 11-17 所 示 。 

按 下 第 一 个 按钮 ，EXT 就 会 通过 Ajax 读 取 一 个 静态 页 面 的 内 容 ， 把 获得 的 页 面 内 容 显示 到 按 
钮 下 面 的 部 分 ， 如 图 11-18 所 示 。 


变化 成 静态 页 面 | 


变化 成 带 javascript 的 页 面 | 





DL 过 
图 11-17 更 新 成 静态 页 面 内 容 图 11-18 更 新 附带 JavaScript 的 页 面 内 容 


按 下 第 二 个 按钮 ，EXT 就 会 去 读 取 另 一 个 静态 页 面 的 内 容 ， 把 获得 的 页 面 内 容 显 示 在 按钮 
下 面 的 部 分 ， 同 时 还 会 执行 页 面 里 的 JavaScript 脚 本 ， 你 将 看 到 图 11-18 下 面 的 长 方形 会 显示 动画 
效果 。 

这 两 种 效果 都 是 通过 Ext .Updater 实 现 的 ，EXT 为 我 们 提供 的 Ext .Updater 不 但 可 以 更 新 
页 面 内 容 ， 还 可 以 设置 是 否 执 行 页 面 中 包含 的 JavaScript 脚 本 。 

现在 我 们 来 看 一 下 代码 ， 如 果 只 想 更 新 静态 页 面 的 内 容 ， 方 法 如 下 面 的 代码 所 示 : 


Ext .get{('result').getUpdater () .updatet{ 
Url: '07-02.html' 
Fj 


上 面 这 段 代 码 的 执行 过 程 如 下 所 示 。 

(1) Ext .get ('result' ) 获得 id='result' 的 DIV。 

(2) getUpdater () 获得 DIV 对 应 的 Ext .Updater 对 象 。 

(3) 调用 update() 函数 ， 取 得 url:'07-02.html' 的 内 容 ， 替 换 DIV 的 内 容 。 

如 果 我 们 想 执 行 后 人 台 HTML 中 的 JavaScript 代 码 ， 则 要 添加 另 一 个 参数 ， 如 下 所 示 : 


Ext .get('result') .getUpdater () .updatel({ 
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url: ‘'07-03.html', 
scripts: true 
}})? 


添加 的 一 行 参数 是 scripts:true， 这 样 updater 就 会 在 获得 页 面 数据 之 后 自动 检测 数据 中 是 否 
包含 JavaScript 脚 本 。 如 果 页 面 中 包含 JavaScript，Ext .updater 就 会 在 读 取 页 面 内 容 后 将 页 面 中 
的 JavaScript 脚 本 提取 出 来 并 执行 这 些 代码 。 

注意 , 如 果 获 得 的 页 面 中 夹杂 了 <script src="ext-all.js"></script> 之 类 的 标签 片段 ， 
就 会 导致 JlavaScript 脚 本 出 错 。 因 为 updater 会 重新 加 载 ext-all.js 肢 本， 这 会 导致 新 加 载 的 ext-alljjs 
脚本 与 原来 页 面 中 的 ext-alljs 脚 本 发 生 冲 突 ， 导 致 整个 页 面 停止 响应 。 

示例 在 11.utiy07-01.html 中 。 


11.8 ”使 用 Ext .util .Format 对 数据 进行 格式 化 


顾名思义 ，Ext .util .Format 的 功能 是 将 各 种 类 型 的 数据 转换 为 特定 格式 的 字符 串 。 在 实 
际 开发 中 ， 我 们 可 以 直接 调用 在 它 内 部 定义 的 常用 工具 函数 来 格式 化 数据 。 下 面 我 们 将 对 
Ext .util.Format 中 的 这 些 格式 化 函数 进行 分 类 介绍 。 
1. 操作 字符 串 
D capitalize(String value): 将 字符 串 开 头 的 第 一 个 字母 变 成 大 写 , Ext .util.Format . 
capitalizel('name'); 的 结果 就 是 Name。 
DD ellipsis(String value，Number length) : 截取 第 一 个 参数 value 前 面 指定 的 多 个 
字符 ， 并 在 后 面 附加 ' . ..'， 在 文字 排版 时 比较 常用 。 
D htmlEncode (String value): 将 文本 编码 ， 把 其 中 的 :、<、> 转 换 成 HTML 中 要 求 的 编 
码 形式 "gamp;"、"&lt;"、"&gt;"。 htmlDecode (String value) 是 htmlEncode() 的 


逆 操 作 。 
D lowercase (String value): 将 文本 都 转换 成 小 写 ， 对 应 的 uppercase(String value) 
的 功能 是 将 文本 都 转换 成 大 写 。 


O stripscripts (Mixed value): 删除 文本 中 所 有 的 <script> 标 签 。 

D stripTags (Mixed value): 删除 文本 中 所 有 的 标签 。 

OQ substr{(String value，Number start, Number length): 截取 子 字符 串 。 

OO trim(String value): 去 除 文本 两 端的 空白 。 

2. 操作 日 期 

DQ date(Mixed value, [String format] ) : 把 日 期 变量 转换 成 对 应 格式 的 字符 串 输出 ， 
Ext .util.Format .date{new Date()，'Y-m-d') 会 得 到 类 似 于 “2008-07-23” 这 样 的 
字符 串 ， 它 的 结果 是 今天 的 日 期 。 

Q dateRenderer (String format): 这 个 函数 可 以 看 作 专门 为 Ext.grid.GridPanel 提 供 
的 工具 函数 ， 它 会 根据 输入 的 日 期 格式 返回 一 个 renderer 函 数 ， 之 后 Ext.grid. 
ColumnModel 会 利用 这 个 renderer 函 数 格式 化 表格 中 的 日 期 。 
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3. 空 值 判断 

Q defaultValue (Mixed value，String defaultValue): 可 以 接收 两 个 参数 ， 如 果 第 
一 个 参数 为 定 ， 就 返回 第 二 个 参数 的 值 ， 否 则 返回 第 一 个 参数 的 值 。 

口 undef (Mixed value): 如 果 value 为 宝 ， 就 返回 空 字符 串 ， 否 则 返回 value 的 值 。 

4. 转换 数字 

口 filesize (Number/String size) : 把 数字 和 字符 串 转 换 成 文件 大 小 的 形式 ， 比 如 
XXXbytes、XXKB、XXME。 


DusMoney(Number/String value): 将 数字 转换 为 货币 〈 美 元 ) 格式 。 


11.9 使 用 Ext .util .css 管理 CSS 样式 


Ext .util.css 主 要 负责 管理 HTML 页 面 中 的 CSS 样 式 。 如 果 我 们 希望 将 页 面 上 的 所 有 文字 
都 设置 成 蓝 色 ， 可 以 使 用 如 下 代码 : 


Ext .util.CSS.createStyleSheet{"x", "*{color:blue}"); 


这 样 会 自动 在 页 面 的 head 标 签 中 添加 一 个 id="x" 的 标签 ， 内 容 是 *{color:blue}， 页 面 中 
的 所 有 元 素 会 自动 设置 这 段 CSS， 于 是 页 面 上 所 有 的 文字 都 变 成 了 蓝 色 。 

如 果 想 知道 当前 已 经 设置 了 哪些 CSS 样 式 ， 我 们 可 以 使 用 getRule() 和 getRules () 函数 。 
getRules () 函数 会 返回 页 面 上 已 设置 的 所 有 CSS 样 式 ， 而 getRule() 则 会 根据 我 们 设置 的 CSS 
选择 符 返回 对 应 的 CSS 样 式 ， 如 下 面 的 代码 所 示 : 


alert (Ext ,util.CSS.getRules()); 
alert (Ext .util.CSS.getRule("*")); 


在 上 例 中 ，getRules () 会 返回 所 有 的 CSS 样 式 ， 而 getRule("*") 返 回 的 是 CSS 选 择 符 * 对 
应 的 样式 。 为 了 提高 效率 ， 第 一 次 调用 geRules () 或 getRule{) 函数 时 ，EXT 会 自动 将 获得 的 结 
果 缓存 起 来 ， 以 便 下 一 次 执行 查找 操作 。 但 如 果 动 态 添加 了 CSS 样 式 ，EXT 并 不 会 自动 刷新 查找 
结果 ， 这 时 就 需要 我 们 调用 refreshcache() 函数 告知 EXT 刷 新 缓存 ， 也 可 以 直接 在 调用 
getRule() 或 getRules () 函 数 时 使 用 refreshcache 参 数 来 达到 刷新 缓存 的 目的 , 如 下 面 的 代码 
所 示 : 


Ext .util .CSS.refreshCache{():; 
Ext .util.CcSS.getRule("*", true); 
Ext .util.CSS .getRule(true) ; 


对 于 已 存在 的 CSS 样 式 ， 可 以 使 用 updatestyleSsheet{) 函数 对 指定 的 样式 进行 更 新 。 比 如 
我 们 希望 将 上 面 例子 中 设置 的 蓝 色 字体 修改 为 红色 字体 ， 可 以 使 用 如 下 代码 ; 

Ext.util.CSS.updateRule("*", *color", "red"); 

也 可 以 删除 指定 ia 的 style 标 签 ， 页 面 上 对 应 元 素 的 样式 会 恢复 到 设置 标签 之 前 的 状态 ， 如 
下 面 的 代码 所 示 : 


Ext .util.CSS .zemoveStyleSheet ("x"); 
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经 过 这 几 步 操作 之 后 ， 我 们 删除 了 之 前 设置 创建 的 style 标 签 ， 页 面 上 的 字体 也 就 恢复 到 添 
加 标签 之 前 的 颜色 了 。 


11.10 ”使 用 Ext .util .ClickRepeatezr 处 理 点 击 事件 


Ext .util.ClickRepeater 监 听 页 面 上 任意 一 个 元 素 的 点 击 事 件 ， 在 用 户 一 直 按 住 鼠 标 时 ， 
ClickRepeater 会 每 隔 一 段 时 间 重 复 触发 一 次 click 事 件 ， 以 此 来 模拟 用 户 连 续 点 击 某 个 元 素 的 


场景 。 
下 面 我 们 来 演示 一 个 示例 ， 只 要 点 击 一 次 按钮 ， 并 持续 按 住 鼠 标 ， 就 会 不 断 触发 click 事 件 ， 
在 页 面 上 显示 越 来 越 多 的 字符 ， 如 图 11-19 所 示 。 


click button 

click click click click click click click 
click click click click click click click 
click click click click click click click 
click click click click click click click 
click click click click click click click 
click click click click click click click 
click click click click click click click 
click click click click click click click 
click click click click click click click 
click click click click click click click 
click click click click click click click 
click click click click click click click 


图 11-19 使 用 ClLickRepeatezr 实 现 重复 点 击 的 功能 


上 例 使 用 clickRepeater 监 听 click button 的 点 击 事件 ， 并 在 每 次 重复 触发 click 事 件 时 
向 HTML 中 写 入 click 内 容 ， 代 码 如 下 所 示 : 


Var clickRepeater = new Ext.util.ClickRepeater (Ext.get('button'})); 
clickRepeater.on{'click', function(}) ({ 

Ext .getDom{('clickResult') ,innerHTML += ' click' 
}}; 


事实 上 ,我们 只 需要 先 根据 id 获 得 一 个 Blement 实例 ， 然 后 用 这 个 Element 实 例 创建 
clickRepeater 对 象 , 之 后 只 需要 为 这 个 clickRepeater 对 象 设置 click 事 件 的 监听 函数 就 可 以 
了 。 在 上 例 的 监听 函数 中 ， 只 是 不 断 地 向 clickResult 这 个 DOM 内 添加 'click' 字 符 串 。 最 终 
页 面 上 显示 的 效果 就 像 图 11-19 一 样 ， 当 我 们 单 击 鼠 标 时 ， 只 要 不 放 开 鼠标 键 就 会 连续 触发 click 
事件 ， 页 面 上 的 “click” 会 不 断 变 多 。 

ClickRepeater 除 了 可 以 实现 连续 点 击 事件 以 外 ， 还 提供 了 一 些 附 加 功能 ， 诸 如 元 素 被 点 
击 时 显示 的 样式 ， 发 生 连 续 点 击 时 每 次 点 击 的 时 间 间 隔 都 可 以 自行 设置 ， 如 下 面 的 代码 所 示 ; 


var clickRepeater = new Ext,ucil.ClickRepeater(Ext,get('button')，({ 
delay: 1000, 
interval: 400, 
pressClass: ‘pressButton' 

}); 

clickRepeater.on('click', function() { 
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Ext .getDom('clickResult ') ,innerRTME += ' click' 
ts 


我 们 使 用 clickRepeater 构 造 函 数 的 第 二 个 参数 设置 附加 功能 ， 上 例 中 设置 了 daelay、 
interval 和 pressClass 这 3 个 参数 。 

D delay: 1000 表 示 用 户 按 住 鼠 标 后 ，1000 ms 之 后 开始 执行 连续 点 击 。 

口 interval: 400 表 示 开 始 执行 连续 点 击 


后 ， 每 次 点 击 之 间 的 间隔 是 400 ms。 标题 
口 pressClass: 'pressClass' 表 示 用 户 按 内 
下 鼠标 后 使 用 的 CSS 样 式 , 该 样式 会 在 用 户 click click click click click 
松 开 鼠标 后 自动 从 当前 元 素 上 移 除 。 
上 面 代码 的 显示 效果 如 图 11-20 所 示 。 图 11-20 为 ClickRepeater 设 置 附加 功能 参数 


示例 放 在 11.utiy10-01.html 中 。 


11.11 使 用 Ext .util.DelayedTask 延 时 执行 函数 


Ext .util.DelayedTask 可 以 延迟 执行 某 一 段 功能 函数 ， 它 的 作用 与 JavaScript 中 提供 的 
setTimeout () 函数 有 些 相似 。 下面 我 们 来 讨论 一 下 如 何在 实际 中 使 用 Ext .util .DelayedTask。 


Ext .get{'button') .on('click', function{) ( 
Var delay = new Ext.util.DelayedTask{function() { 
Var text = new Date().toLocaleString() + "<br />"; 
Ext .get ('result') .update (text); 
到 
Gelay.delavy{(500); 
2 


上 例 中 ， 每 次 单 击 button 都 会 创建 一 个 Ext.util1.DelavyedaTask 实 例 ， 它 会 将 当前 时 间 显 
不 到 id="result" 的 DOM 内 部 。 在 创建 delay 实 例 之 后 就 调用 它 的 Gelay (500) 函数 ， 这 会 使 定 
义 在 DelayedTask 中 的 回调 函数 延迟 500 ms 后 再 执行 。 因为 在 单 击 button 之 后 ， 再 过 $00 ms 之 
后 才能 在 页 面 上 看 到 显示 当前 时 间 。 

如 果 我 们 希望 在 回调 函数 执行 前 取消 操作 ， 可 以 调用 cancel () 函数 。 

如 果 延 迟 执行 的 回调 函数 需要 设置 范围 或 参数 ， 我 们 也 可 以 在 创建 DelayedTask 时 进行 设 
置 ， 如 下 面 的 代码 所 示 : 


App = 1{ 
msg: ' Hello: ' 
recall: function{({name, title) { 
Var text = new Date().toLocaleSstring()+ this.msg + title + ' ‘+ name + "<br />": 
Ext .get('result') .update (text); 





} 

] 7? 

Ext .get('button').on('click'，function() { 
Var delay = new Ext,util.DelavyedTask(aApp .recall1，RApp，['kayzhan'!'，'MSs.'])， 
delay.delay (500); 

})» 


DelayedTask 构 造 函 数 的 第 二 个 参数 为 延迟 执行 的 回调 函数 指定 scope， 第 三 个 参数 为 延迟 
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执行 的 回调 函数 指定 执行 时 传 入 的 参数 列表 。 请 注意 ， 这 里 传递 的 参数 列表 是 一 个 数组 。 
DelayedTask 只 适用 于 对 某 一 功能 函数 延迟 执行 一 次 的 情况 , 如 果 希 望 每 隔 一 段 时 间 就 执行 
一 次 功能 函数 ， 就 会 发 现 它 所 控制 的 延迟 时 间 是 非常 不 精确 的 ， 如 下 面 的 代码 所 示 : 


Var time Gisplay = ""; 
function zecallL() { 
var t = new Datel(); 
time display += 上 .toLocaleString() + "<br>"; 
Viewport .items .itermat (0) .body.update(time_ display)}; 
delay.delay (3000); 
} 
var delay = new Ext.util.DelayedTask (function(}{recall();}); 
delay .delay (3000)，; 


上 述 代码 中 ,我 们 在 回调 函数 recall () 执 行 en 11:15:15 
二 | 和 2008 年 12 月 8 日 11:15:18 
天 下 后 有 次 民 行 于 clay (50001， 希望 3 秒 后 能 2008 年 12 月 8B 11:15:21 
够 再 次 执行 回调 函数 。 但 是 ， 多 次 调用 之 后 就 会 2008 年 12 月 8 日 11:15:27 
出 现 延 时 错误 的 问题 ， 如 图 11-21 所 示 ， 2008 年 12 月 8 日 11:15:30 


可 以 看 到 11:15:21 到 11:15:27 之 间 相 差 了 6 2008 年 12 月 8 日 11:15:33 


秒 , 而 不 是 我 们 期 望 的 3 秒 , 这 是 由 于 DelayedTask 图 11-21 多 次 执行 DelayedTask 后 出 现 延 时 错误 
内 部 对 数值 计算 不 精确 造成 的 。 对 于 循环 执行 的 任务 ， 我 们 应 该 使 用 下 面 介绍 的 TaskRunner， 
而 不 是 直接 使 用 DelayedTask。 

示例 在 11.utiy11-01.html 中 。 


11.12 使 用 Ext .util .raskRunnezr 执行 循环 任务 


Ext.util.TaskRunner 可 以 管理 一 系列 回调 函数 ， 让 它们 以 并 行 的 方式 循环 执行 。 它 提供 
了 start()、stop () 和 Stopal1l 1() 等 方法 ， 用 来 控制 功能 函数 的 启动 和 停止 ， 或 一 次 性 停止 所 有 
已 经 执行 的 功能 函数 。 不 过 在 使 用 Ext .util.Runner 之 前 ， 首 先 需要 按照 要 求 创 建 一 个 JSON 对 
象 ， 这 个 JSON 对 象 中 需要 包含 回调 函数 run () 和 循环 间隔 interval， 之 后 再 调用 TaskRunner 
的 start () 函数 ， 就 可 以 启动 整个 任务 了 ， 如 下 面 的 代码 所 示 : 
var task = { 
run: function() { 
Ext .get('result') .update (new Date() .toLocaleSstring()); 
}, 
interval: 1000 
}; 
Var taskRunner = new Ext.util.TaskRunner (); 
taskRunner . Start (task): 


上 例 中 , 我 们 每 隔 1 秒 就 更 新 一 次 id="result" 内 部 的 时 间 信 息 , 就 像 实现 了 一 个 时 钟 一 样 。 
如 果 希 望 停止 执行 任务 ， 可 以 调用 stop() 函数 停止 这 个 任务 ， 或 使 用 stopa1l1 () 函数 停止 当前 
所 有 正在 运行 的 任务 ， 如 下 面 的 代码 所 示 : 
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Ext .get('stop'}) .on('click', function{() { 
taskRunner.stop(task); 
下 


Ext .get('stopAll').on('click', function(} { button | 
taskRunner .stopAll (); 2008 年 12 月 8 日 11:38:06 
} ) ; 2008 年 12 月 8 日 11:38:09 
i 2008 年 12 月 8 日 11:38:12 
我 们 将 DelayedTask 中 出 现 错误 的 例子 放 到 2008 年 12 月 8 日 11:38:15 
TaskRunner 中 执行 ， 如 下 面 的 代码 所 示 : 2008 年 12 月 8 日 11:38:18 
2008 年 12 月 8 日 11:38:21 
var text = ''; 2008 年 12 月 8 日 11:38:24 
Var task = { 2008 年 12 月 8 日 11:38:27 
run: function() { 2008 年 12 月 8 日 11:38:30 
text += new Date() .toLocaleSstring{() + "<br />"; 2008 年 12 月 8 日 11:38:33 
Ext .get ('result') .update (text); 2008 年 12 月 8 日 11:38:36 
) ， 2008 年 12 月 8 日 11:38:39 
interval: 3000 2008 年 12 月 8 日 11:38:42 
}; 2008 年 12 月 8 日 11:38:45 
var taskRunner = new Ext .util.TaskRunner{); 2008 年 12 月 8 日 11:38:48 
taskRunner .start (task); 2008 年 12 月 8 日 11:38:51 
a ke 2008 年 12 月 8 日 11:38:54 
我 们 还 是 每 唱 3 秒 向 页 面 输出 一 次 当前 时 间 , 从 页 面 2008 年 12 月 8 日 11 :38:57 
上 的 显示 结果 来 看 ， 没 有 发 生 延 时 错误 的 情况 ， 说 明 使 2008 年 12 月 8 日 11:39:00 
用 TaskRunner 执 行 定时 任务 是 值得 信任 的 ， 如 图 11-22 图 11-22 使 用 TaskRunner 执 行 定时 任务 
所 示 。 


示例 在 11.util/12-01.html 中 。 


11.13 混合 型 集合 Ext .util .MixedCollection 


Ext .util .MixedCollection 是 一 个 混合 型 集合 类 ， 它 既 可 以 支持 用 数字 型 索引 获取 和 保 
存 数据 ， 也 可 以 支持 key :value 对 的 形式 获取 和 保存 数据 。Mixedcollection 不 但 提供 了 与 集 
合 相 关 的 功能 函数 ， 还 提供 了 对 事件 的 支持 。 我 们 可 以 监听 这 些 事件 以 了 解 外 部 对 
Mixedcollection 执 行 的 操作 。 
1. MixedCollection 的 基本 操作 
我 们 先 使 用 Mixedcollection 完 成 集合 中 最 基本 的 操作 添加、 删除 、 查 找 和 修改 )， 如 下 
面 的 代码 所 示 : 
var collection = new Ext.util.MixedCollection!(); 
/7 


collection.add{1)}; 
collection.add{(2); 


collection.add(3); 
/1 


var result = []; 

for (var i = 0; i < collection.getCount(); i++) { 
result .push(collection.get (i)):; 

} 

alert (result):; 

| 
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collection.removeAt (0) : 

/1 

collection.replace(0, 200); 

x 

result = []; 

for (var i = 0; i < collection.getCount{(); i++) { 
result.push (collection,.get (i)); 

} 


alert (result); 


上 例 创 建 了 一 个 Ext .util .MixedCollection 实 例 , 调用 它 的 ada() 函数 向 实例 中 添加 了 几 
个 数值 , 然后 使 用 for 循 环 将 collection 中 的 数值 读 取出 来 放 入 一 个 数组 中 , 再 输出 这 个 数组 中 
包含 的 值 ， 得 到 的 结果 是 [1,2,3]。 

接 下 来 , 我 们 调用 removeAt () 函数 ,将 collection 中 的 第 一 个 数值 删除 , 然后 调用 replace 
(0,200) 将 collection 中 的 第 一 个 数值 替换 为 200， 再 次 使 用 for 循 环 读 取 collection 中 的 数值 
并 放 入 一 个 数组 中 ， 这 次 输出 的 结果 是 [200, 3]。 

2. 向 MixedCollection 中 添加 数据 

MixedCollection 提 供 了 多 种 向 集合 中 添加 数据 的 方式 , 我 们 可 以 使 用 aaa{) 函数 一 次 只 向 
集合 中 添加 一 条 数据 ， 也 可 以 使 用 aaaal1l () 函数 将 一 个 数组 或 一 个 JSON 对 象 中 的 数据 依次 添加 
到 集合 中 。Mixedcollection 还 提供 了 insert () 函数 ， 允 许 用 户 指定 添加 数据 的 位 置 。 这 几 种 
添加 数据 的 方法 如 下 所 示 : 

Var collection = new Ext.util.MixedCollection{); 

// 

collection.add(1); 


Collection.addall([2，3]): 
colLllection.insert (1，100): 


上 述 代 码 先 向 collection 中 添加 了 一 条 数据 1， 然 后 再 将 数组 中 的 两 条 数据 添加 到 
collection 中 ， 最 后 将 100 插 入 到 collection 的 索引 为 2 的 位 置 ， 这 样 得 到 的 结果 就 是 
BL E00 2 二 

3. 删除 MixedCollection 中 的 数据 

如 果 需 要 删除 Mixedcollection 中 的 数据 ， 可 以 选择 使 用 remove() 或 removeAt {) 函数 从 
集合 中 删除 一 条 数据 ， 或 使 用 clear () 函数 删除 集合 中 的 所 有 数据 ， 如 下 面 的 代码 所 示 : 


collection.removeaAt (0); 

collection.remove{("3"); 

collection.clear{): 

removeAt {) 与 remove() 之 间 的 区 别 是 ，removeAt () 的 参数 是 索引 值 ， 它 会 删除 集合 中 指 
定 索 引 值 的 数据 ，remove () 的 参数 是 我 们 希望 删除 的 数据 ， 它 会 将 集合 中 与 参数 值 相同 的 数据 
删除 。clear() 函数 的 作用 是 清空 整个 集合 ， 它 会 删除 集合 中 所 有 的 数据 。 

4. 修改 Mixedacollection 中 的 数据 


Mixedcollection 只 提供 了 一 个 修改 数据 的 函数 replace()， 我 们 需要 为 xeplace() 指定 
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需要 修改 的 数据 在 集合 中 所 处 的 位 置 和 修改 之 后 的 数据 ， 如 下 面 的 代码 所 示 : 


collection,.replace(2, "xxx"); 

上 述 代 码 将 会 把 集合 内 的 第 三 个 数据 修改 为 "xxx"。 

5. 读 取 MixedCollection 中 的 数据 

在 了 解 了 如 何 添加 、 删 除 和 修改 MixedCcollection 内 的 数据 之 后 ， 我 们 还 需要 执行 读 取 数 
据 的 操作 。MixedCcollection 提 供 了 一 系列 读 取 内 部 数据 的 孙 数 ， 如 下 面 的 代码 所 示 : 

var collection = new Ext.util.MixedCollection{): 

已 条] 和 CE BO "T2235 "3 

Var result = Ext.getDoml('result'); 

result.innerHTML += collection.first(} + "<br />"; 

result.innerHTML += collection.last{) + "<br />"; 

result.innerHTML += collection.getCount() + "<br />"; 


result.innerHTML += collection.get (1} + "<br />"; 
result ,innerHTML += collection.indexOof ("33"*) + "<br />"; 


上 述 代码 列 出 了 从 MixedCollection 中 获取 数据 的 最 基本 的 几 种 方法 。first() 和 1ast 1() 
函数 分 别 获 得 集合 中 的 第 一 条 和 最 后 一 条 数据 ; getcount () 函数 得 到 的 是 集合 中 的 数据 的 数量 ; 
get () 冰 数 根据 索引 值 返 回 集合 中 对 应 的 数据 ;，indqexof () 则 是 返回 集合 中 数据 对 应 的 的 索引 
值 。 通 过 上 面 这 些 功能 函数 ， 我 们 已 经 能 够 对 集合 中 的 数据 进行 常规 的 读 取 操 作 了 。 

6. 对 MixedCollection 中 的 数据 执行 复杂 的 查询 操作 

如 果 我 们 需要 执行 复杂 的 条 件 查询 ， 可 以 使 用 Mixedcollection 提 供 的 fina() 系 列 函 数 ， 
如 下 所 示 : 

Var collection = new Ext.util.MixedCollection!(); 

collection.addAll{[{name:"11"}, {name:"22"}, {name:"33"}, {name:"44"}, {name:"55"}]); 

Var result = Ext .getDom('result'); 

result.innerHTML += collection.find{function{o) ({ 

return o.name == '11'; 

FE + Suhbr: mr 

result.innerHTML += collection.findIindex("name”", "1") + "<br />"; 

result.innerHTML += collection.findIindexBy (function(o) { 


return o.name == '11°'， 
J * bE ys 


fina() 范 数 支 持 使 用 回调 函数 判断 集合 中 的 对 象 是 否 满足 查询 要 求 ， 如 果 存 在 满足 查询 条 
件 的 对 象 , 它 会 返回 一 个 满足 条 件 的 对 和 象 。 FinadIndex{) 函数 会 对 集合 中 的 对 象 的 某 个 属性 进行 
匹配 , 并 返回 第 一 个 满足 条 件 的 对 象 的 索引 值 ，findrndexBy () 函数 使 用 回调 函数 查询 集合 中 的 
对 象 ， 并 返回 第 一 个 满足 条 件 的 对 象 的 索引 值 。 通 过 fina 系 列 的 这 3 个 函数 ， 我 们 可 以 实现 对 集 
合 内 的 数据 执行 复杂 的 查询 操作 。 

7. 复制 MixedCollection 中 的 数据 

可 以 使 用 clone() 函 数 复制 一 个 与 原 有 实例 内 容 完 全 相同 的 Mixedcollection 对 象 ,也 可 以 
使 用 filter () 或 filterBy() 函数 将 集合 中 符合 要 求 的 部 分 复制 到 一 个 新 的 Mixedcollection 
对 象 中 ， 如 下 面 的 代码 所 示 : 
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var collection = new Ext.util.MixedCollection!(); 
collection.addaaAll([{name:"11"}, {name:"22"}, {name:"33"}, {name:"aa"}, {name: "bb")}]); 
var collectionl = collection.clone(); 
var collection2 = collection.filter("name", /^\d+$/); 
Var collection3 = collection.filterBy{(function(o) { 
return /^\D+$/.test(o.name); 
}}; 
Ext .getDom('result').innerHTML += collectionl.getCount() + "<br />"; 
Ext .getDom('result').inmerHTML += collection2.getCount{) + "<br />"; 
Ext .getDom('result').inmnerHTML += collection3.getCount{) + "<Dr />"; 


使 用 clone() 函数 生成 的 MixedCcollection 实 例 中 有 5 条 数据 ， 为 它 将 原 Mixed- 
Collection 中 的 数据 都 复制 到 了 新 实例 中 。 而 filter () 和 filterBy() 返 回 的 实例 中 分 别 只 有 3 
条 和 2 条 记录 ， 因 为 filter{('name',/^\d+sy/) 使 用 正则 表达 式 只 保留 集合 中 name 属 性 为 数字 的 
数据 ， 而 filterBy () 函数 只 保留 集合 中 name 属 性 不 为 数字 的 数据 ， 这 样 我 们 就 可 以 实现 根据 条 
件 复制 Mixedcollection 中 的 数据 的 功能 了 。 

8. 使 用 key :value 的 方式 操作 MixedCollection 中 的 数据 

MixedCollection 还 支持 key :value 的 操作 方式 ， 可 以 为 每 条 记录 设置 对 象 的 key 值 ,之 后 
就 可 以 使 用 key 值 操作 集合 内 的 数据 。 使 用 key 值 操作 的 方法 与 使 用 索引 操作 的 方法 类 似 ， 如 下 
面 的 代码 所 示 : 

Var collection = new Ext.util.MixedCollection(); 

collection.add{"keyl", 1); 

collection.add("key2", 2); 

collection.add{"key3", 3); 

collection.insert(1, “keyl10", 100); 

Var result = [(]; 

for {var i = 0; i < collection.getCount (): i++) { 

result .push{collection.get (i)); 

} 

alert (result); 

collection,remove{"key3"); 

collection.replace("key2", 200); 

result = 1]? 

for {var i = 0; i < collection.getCount(); i++) { 

result .push{(collection.get (i)); 

} 

alert (result); 

上 述 代 码 示例 中 ,我 们 在 向 集合 中 添加 数据 时 全 部 使 用 了 key:value 的 形式 ,为 每 个 添加 的 
数据 都 指定 了 对 应 的 key 值 ， 这 样 我 们 就 可 以 在 删除 和 修改 这 些 数据 时 直接 使 用 key 值 了 。 

9. MixedCollection 中 的 事件 

MixedCollection 继 承 了 Observable， 因 此 可 以 为 它 设置 监 昕 函数 ， 处 理 其 内 部 触发 的 各 
种 事件 。MixedCollection 内 部 定义 了 adda、clear、remove、replace 等 4 个 事件 ， 分 别 对 应 
集合 中 的 添加 数据 、 清 空 数据 、 删 除数 据 和 更 新 数据 等 操作 。 可 以 为 这 4 个 事件 设置 监听 函数 ， 


从 而 获知 集合 内 部 数据 的 变化 ， 如 下 面 的 代码 所 示 : 


Var Collection = new Ext.util.MixedCollection(); 
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collection.on('add', function(index, o, key) I 
alert ("在 *” + index + "添加 了 数据 " + o + "， key 为 " + key); 
}); 
collection.on{'clear’', function{() 1{ 
alert ("集合 数据 被 清空 "); 
})»; 
collection.on('remove', function{(o, key) { 
alert ("删除 了 数据 " + o + "，key 为 " + key); 
和 
collection.on{'replace’', function(key, oldOobject, newObject) { 
alert ("修改 了 人 key 为 ” + key + "的 数据 " + newObject + "， 和 修改 前 的 值 为 * + oldobject); 
J 


Ext .get('add') .on{'click', function{() { 
collection.add{new Date{) .getTime{)}); 

Eis 

Ext.get{'clear'}.on('click', function() 1{ 
collection.clear!(); 

Rs 

Ext ,get('remove') .on{'click', function() ({ 
collection.removeAt (0),; 

3 

Ext .get{'replace'’) .on('click', function{) { 
collection.replace{0, new Date(}.toLocalestring()); 

}):3 


当 我 们 对 集合 内 的 数据 执行 操作 时 ， 就 会 自动 触发 事件 ， 执 行 监听 函数 内 的 操作 。 
示例 在 11.util/13-01.html 中 。 


11.14 使 用 Ext .util .TextMetrices 获得 文本 所 占 的 高 度 和 宽度 


在 我 们 希望 获得 页 面 上 文本 所 占 的 高 度 和 宽度 时 ， 就 需要 使 用 Ext .util.TextMetrices， 
如 下 面 的 代码 所 示 : 


Var metrics = Ext.util,TextMetrics.createInstance ("text"): 
Var size = metrics.getSize("www.familyl168.com"); 
Ext .getDom('result').innerHTML += size.width + “," + size.height; 


首先 , 我 们 通过 Ext .util .TextMetrics 类 的 createInstance{) 函 数 创 建 一 个 实例 。 然后， 
调用 实例 的 getsize() 函 数 ，EXT 会 自动 获得 idq="text" 这 个 标签 上 定义 的 CSS 样 式 ， 并 以 此 作 
为 计算 文本 大 小 的 依据 ， 我 们 得 到 的 size 中 就 包含 了 文本 的 实际 宽度 和 高 度 。 最 后 显示 出 的 结 
果 是 136 px 和 18 px。 这 说 明 ， 如 果 把 www.family168.com 这 段 字 符 串 显示 在 ia="text" 标 签 中 ， 它 
的 宽度 是 136 px， 高 度 是 18 px。 

对 于 已 创建 完成 的 metrics 实 例 ， 如 果 我 们 希望 改变 与 文本 显示 相关 的 CSS 样 式 ， 可 以 使 用 
bind() 函数 ， 它 的 参数 是 HTML 上 的 一 个 标签 ， 它 会 将 这 个 标签 上 的 CSS 样 式 复制 过 来 ， 用 作 下 
一 次 计算 文本 宽度 和 高 度 的 依据 ， 如 下 面 的 代码 所 示 : 


metrics.bind("result"*); 
Var size = metrics.getSize("www.familyl168.com"); 
Ext .getDom('result').innerHTML += size.width + "," + Size,height + "<br />"; 
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在 HTML 中 ，id="result" 的 标签 上 设置 了 font-weight :bold 的 CSS 样 式 ，metrics 实 例 
将 这 段 CSS 样 式 复制 之 后 ,， 后面 的 文字 都 会 以 粗 体形 式 进 行 计算 所 以 最 后 得 到 的 宽度 为 153 px， 
高 度 为 18 px。 

对 于 div 标 签 这 种 可 能 出 现 自动 换行 的 情况 ，metrics 提 供 了 setFixedwidth() 函 数 。 事 先 
使 用 setFixedwidth() 函数 为 文本 设置 一 个 固定 的 宽度 ， 然 后 调用 getsize() 函数 就 可 以 获得 
自动 换行 后 的 实际 高 度 和 宽度 ， 如 下 面 的 代码 所 示 : 

var metrics = Ext.util.TextMetrics.createInstance("result"); 

metrics.setFixedWidth{100); 

size = metrics.getSize{"《 深 入 浅 出 Ext JS family168 出 品 " ) ; 

Ext .getDom('result').innerHTML += size.width + "," + size.height; 


var Size = metrics.getSize("www.familyl68.com*); 
Ext .getDom('result').innerHTML += size.width + "," + size.height; 


上 述 代码 中 , 使 用 setFixedwiath(100) 将 最 大 宽度 设置 为 100px。 计算 “《 深 入 浅 出 Ext JS》 
family168 出 品 ” 这 段 文本 将 会 获得 100 px 和 72 px 的 结果 ， 这 说 明文 字 如 预期 的 一 样 换行 显示 了 。 
但 是 ， 对 于 “www.family168.com” 这 段 文字 ， 获 得 的 结果 却 是 100 px 和 18 px。 因 为 HTML 中 无 
法 自动 将 一 长 串 英文 单词 截断 ， 所 以 ， 虽 然 文 字 已 经 超出 了 设置 的 最 大 宽度 ， 但 也 无 法 产生 自动 
换行 的 效果 。 这 种 情况 下 ，Ext .util ,TextMetrices 也 就 无 法 自动 计算 出 文字 实际 占用 的 宽度 
和 高 度 了 。 实 际 情况 中 ， 这 段 文字 有 可 能 与 其 他 部 分 的 文字 重复 。 

示例 在 11.utiy14-01.html 中 。 


11.15 使 用 Ext .KeyNav 处 理 导航 按键 


Ext .KeyNav 可 以 为 某 一 对 象 绑 定 导航 按键 ， 导 航 按键 包括 enter、left、right、up、down 、tab、 
esc、pageUp、pageDown、del、home 和 end 等 12 个 按键 。 
Ext .KeyNav 可 以 绑 定 在 任意 一 个 对 象 上 ， 如 下 面 的 代码 所 示 : 


Var el = Ext,get('texcarea':): 
Var keyNav = new BEXt .KeyNav(tel，({ 
left: functionl(e) { 
el.setwWidthlel.getWidth() - 10); 
i 村 
right: function{e) { 
el.setWidth{el.getwidth{) + 10);，; 
]， 
up: function(e) { 
el.setHeight (el .getHeight() - 10);，; 
3 
down: function{e) ({ 
el .SetHeight (el.getHeight() + 10):; 
} 
家! 


我 们 将 一 个 KeyNav 绑 定 在 文本 域 (TextArea) 上 ， 当 用 户 在 文本 域 上 按 下 left 键 和 right 键 时 ， 
会 改变 文本 域 的 宽度 ， 当 用 户 在 文本 域 上 按 下 up 键 和 down 键 时 ， 会 改变 文本 域 的 高 度 。 每 次 按 
键 都 会 在 对 应 的 宽度 或 高 度 上 增 减 10 个 像素 。 
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在 为 一 个 对 象 绑 定 了 KeyNav 之 后 ， 如 果 希 望 取消 响应 按键 功能 ， 可 以 调用 KeyNav 提 供 的 
disable() 函数 ， 这 时 使 用 KeyNav 在 该 对 象 上 定义 的 所 有 按键 功能 都 将 被 取消 。 在 需要 启用 
KeyNav 的 功能 时 ， 随 时 都 可 以 调用 enable() 函数 激活 KeyNav， 这 时 该 对 象 上 由 KeyNav 定 义 的 
所 有 按键 功能 都 将 被 启用 ， 对 keyNav 禁 用 和 启用 的 功能 不 会 影响 对 原来 对 象 的 正常 操作 。 禁 用 
和 局 用 功能 如 下 面 的 代码 所 示 : 

Ext.get("dis") -on{'cliick',; functiont{)} { 

keyNav .disablel(); 
A, function() { 


keyNav .enable!()}: 
下 


这 样 做 , 点 击 id="dis" 按 钮 会 将 keyNav 禁 用 , 我 们 再 也 无 法 使 用 按键 控制 textarea 改 变 大 
小 了 。 点 击 id="en" 按 钮 会 将 keyNav 启 用 , 之 后 又 可 以 在 textarea 上 使 用 定义 好 的 功能 函数 了 。 
示例 在 11.utiy15.html 中 。 


11.16 ”使 用 Ext .KeyMap 为 对 象 绑 定 按 键 功能 


在 Ext .KeyNav 中 我 们 只 能 处 理 12 个 按键 ， 在 希望 处 理 更 多 按键 时 ，KeyNav 就 显得 力不从心 
了 ， 这 时 我 们 需要 的 是 Ext .KeyMap， 它 对 键盘 上 的 每 个 按键 都 做 了 映射 ， 可 以 使 用 它 为 任意 一 
个 按键 设置 处 理 函 数 ， 代 码 如 下 所 示 : 


Var keyMap = new EXL .KeYMap ('LeXxtarea'，{ 
key: 了 XLt ,EventObject .LEFT， 
fn: tunction(e) { 
keyMap .el .setWidth(keyMap.el .getWidth{) -~ 10); 
}); | 
Ext .KeyMap 和 Ext .KeyNav 的 使 用 方法 有 些 相 似 ， 不 同 的 是 ， 在 Ext .KeyMap 中 可 以 直接 使 
用 key 指 定 需 要 监听 的 按键 。 这 里 key 对 应 的 可 以 是 任意 一 个 按键 ， 在 绑 定 的 对 象 上 发 生 对 应 按 
键 按 下 的 事件 时 ， 就 会 触发 tn 对 应 的 回调 函数 ， 这 里 使 用 的 回调 函数 与 Ext .KeyNav 有 些 不 同 。 
在 Ext .KeyNav 中 ， 如 果 不 指定 scope， 那 么 回调 函数 中 的 this 引 用 默认 会 指向 我 们 所 创建 的 
Ext .KeyNav 实 例 。 但 是 ， 在 Ext .KeyMap 中 ， 如 果 不 指定 scope， 那么 回调 函数 中 的 this 引 用 默 
认 会 指向 当前 页 面 的 window 对 象 。 
Ext .KeyMap 不 仅 拥 有 与 Ext .KeyNav 一 样 的 disable() 和 enable() 函数 ， 还 可 以 对 按键 处 
理 范 数 执行 禁用 和 启用 操作 。 它 还 提供 了 一 个 isEnableda() 函 数 ， 通 过 这 个 函数 我 们 可 以 得 知 
keyMap 实 例 的 状态 。 在 keyMap 的 状态 为 启用 时 ，isEnabled() 函 数 返回 true; 在 keyMap 的 状态 
为 禁用 时 ，isEnabled() 函 数 返 回 false， 如 下 面 的 代码 所 示 : 


Ext .gett"dis") .on('click’', function{()} { 

keyMap .disable(); 

Ext .get('result') .update (keyMap.isEnabled!()):; 
] 
Ext .get('en’')}.on{'click', function() { 
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keyMap .enable(); 
Ext .get ({'result'} .update (keyMap.isEnabled()); 


二 
Ext .KeyMap 也 可 以 一 次 绑 定 多 个 按键 事件 ， 如 下 面 的 代码 所 示 : 


Var keyMap = new Ext.KeyMap('textarea', [{ 
key: Ext.EventObject .LEFT, 
fn: function(e) { 
keyMap.el.setWidth (keyMap.el.getwidth(} - 10); 


key: Ext.EventObject .RIGHT., 
fn: function(e) ({ 
keyMap .el .setWidth(keyMap.el.getWidth() + 10); 


key: Ext.EventObject.UP, 
fn: function(e) { 
keyMap .el.setHeight (keyMap .el.getHeight() - 10):; 


key: Ext.EventObject .DOWN, 
fn: function(e) { 
keyMap .el .setHeight {keyMap.el.getHeight() + 10); 


3 


上 例 中 我 们 使 用 数组 作为 参数 , 将 left、 right、up、down 这 4 个 按键 事件 都 绑 定 在 textarea 
这 个 对 象 上 ， 每 个 按键 各 自 定义 了 对 应 的 处 理 函数 ， 这 样 我 们 就 可 以 使 用 按键 改变 textarea 的 
大 小 了 。 

Ext .KeyMap 支 持 一 次 为 多 个 按键 事件 设置 同一 个 监听 器 。 下 例 中 ， 在 用 户 按 下 a、b、c、4d 
这 4 个 键 中 的 任意 一 个 键 时 ， 都 会 将 textarea 的 背景 变 为 红色 ， 并 在 1 秒 后 恢复 为 白色 。 在 设置 
key 值 时 直接 使 用 'abca' 的 形式 进行 赋值 ， 如 下 面 的 代码 所 示 : 


Var keyMap = new Ext.KeyMap('textarea', 
key: 'abcd', 
fn: function(e) { 
keyMap .el .setStyle("backgroundColor", "red"),; 
var fn = function{)t{ 
keyMap.el.setStyle("backgroundColor", "white"); 
7 
fn.defer(1000); 
} 
所 让 


对 于 不 能 使 用 字符 表示 的 按键 事件 ， 也 可 以 使 用 数组 的 方式 定义 key 的 值 ， 如 下 面 的 代码 
所 示 : 


Var keyMap = new Ext.KeyMap('textarea', { 
key : [Ext .EventObject .ENTER, Ext .EventObject .BACKSPACE, Ext .EventObject .SPACE], 


fn: function(e)} { 
keyMap.el.setstyle("backgroundColor", "red"); 
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var fn = function(){ 
keyMap.el.setSstyle("backgroundColor", "white"); 
}; 
fn.defer (1000); 
} 
}); 


上 例 使 用 数组 的 形式 为 key 设 置 了 3 个 元 素 ，textarea 会 在 用 户 按 下 回 车 、 退 格 或 空格 键 时 
执行 事件 处 理 函 数 。 

Ext .KeyMap 还 支持 对 组 合 按键 的 处 理 ， 比 如 可 以 要 求 : 只 有 在 按 下 回 车 键 后 ， 再 按 下 向 左 、 
向 右 、 向 上 和 向 下 键 才 能 修改 textarea 的 大 小 ， 如 下 面 的 代码 所 示 。 


Var keyMap = new Ext,.KeyMap('textarea', [{ 
key: Ext.EventObject .LEFT, 
Ctrls Crues 
fn: function(e) { 
keyMap .el .setWidth (keyMap .el.getWidth() - 10); 
} 


key: Ext.EventObject .RIGHT, 
Ctr Cewe: 
fn: function(e) { 
keyMap.el.setWidth (keyMap.el.getWidth() + 10); 
} 


key: Ext .EventObject .UP, 
ctrl: true, 
fn: function(e) { 
keyMap.el .setHeight (keyMap.el .getHeight() - 10); 
} 


Key: Ext.EventObject ,DOWN， 
ctrl: true, 
fn: function(e) { 
keYyMap .el .setHeight (keyMap .el .getHeight() + 10); 
} 
区 是 了 


示例 在 11.utiy16-01.html 中 。 


11.17 扩展 

EXT 还 对 JavaScript 中 的 原生 类 型 进行 了 扩展 , 为 这 些 原生 类 型 添加 了 附加 功能 , 但 并 没有 修 
改 类 型 中 的 原 有 功能 ， 所 以 不 会 影响 我 们 编写 的 JavaScript 函 数 。 
11.17.1 扩展 Date 


Date 是 EXT 中 扩展 功能 最 丰富 的 类 型 ， EXT 为 Date 添 加 了 许多 工具 函数 。 例如 ,getFirst- 
DateInMonth{) 函数 可 以 得 到 当前 月 份 第 一 天 的 日 期 ，getLastDateOofMonth () 函数 可 以 得 到 
当前 月 份 最 后 一 天 的 日 期 。 
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EXT 还 为 Date 类 型 提供 了 与 半年 相关 的 函数 : isLeapYear() 可 以 判断 当前 年 份 是 否 为 图 
年 ; getDayOfYear() 可 以 获得 当前 日 期 是 这 一 年 的 第 几 天 ; getDaysInMonth () 可 以 获得 当前 
日 期 是 这 一 个 月 的 第 几 天 ;，getWeekOfYear() 可 以 获得 当前 日 期 是 这 一 年 的 第 几 周 。 

add (string interval，Number value) 销 数 用 于 计算 日 期 ， 这 个 函数 可 以 在 原 有 日 期 的 
基础 上 增加 或 减少 某 一 项 的 数值 ， 如 下 所 示 : 


var dt = new Date{'10/29/2006') .add (Date.DAY, 5); 


这 是 在 原 有 日 期 的 基础 上 增加 5 天 ，at 是 我 们 获得 的 新 的 日 期 变量 ， 它 的 值 应 该 是 
'11/3/2006'。 除 了 Date.DAY 之 外 ， 我 们 可 以 使 用 Date .HOUR、Date.MILLI、Date .MINUTE、 
Date .MONTH、Date.SECOND 和 Date .YEAR 来 指定 需要 增加 和 减少 的 项 目 。 

我 们 可 以 使 用 函数 between () 和 getElapsed() 来 判断 日 期 范围 。between (Date start， 
Date end) 可 以 判断 日 期 变量 是 否 在 给 定 的 范围 之 内 ，getElapsed([Date date]) 则 获得 日 期 
变量 与 指定 日 期 之 间 相 差 的 毫秒 数 ， 它 可 以 用 于 计算 两 个 时 间 点 之 间 的 间隔 。 

在 EXT 中 ， 日 期 类 型 的 格式 化 功能 也 有 大 幅 增 强 ， 可 以 直接 使 用 format ('Y-m-d' ) ;获得 特定 
格式 的 日 期 ， 也 可 以 通过 parse('2008-07-24'，'Y-m-d') ;将 字符 串 解 析 为 对 应 的 日 期 变量 。 

表 11-4 列 出 了 可 以 选择 的 日 期 格式 符号 。 


表 11-4 日 期 格式 符号 





格 式 说 明 示 例 
d 日 期 ， 两 位 数字 ， 不 足 时 补 零 01 ~31 
D 星期 的 简写 Mon ~ Sun 
j 日 期 ， 不 会 补 零 | 
1 星期 的 全 称 Sunday ~ Saturday 
N 使 用 数字 表示 星期 (ISO-8601) 1 (Monday) ~ 7 (Sunday) 
S 日 期 后 级 ， 与 j 配 合 使 用 St、nd、rd 或 中 
Ww 使 用 数字 表示 星期 0 (Sunday) ~ 6 (Saturday) 
z 年 中 的 第 几 天 《从 0 开始 ) 0 ~ 364 ( 国 年 365) 
Ww 一 年 中 的 第 几 个 星期 (ISO-8601 从 周一 开始 ) 
F 月 份 的 全 称 January ~ December 
m 月 份 ， 两 位 数字 ， 不 足 时 补 等 01~12 
M 月 份 的 简写 Jan ~ Dec 
n 月 份 ， 不 会 补 零 1~12 
t 当前 月 份 一 共有 多 少 天 28~31 
L 是 否 为 闵 年 闽 年 为 1， 和 否则 为 0 
9 年 份 〈ISO-8601) 与 YY 相同， 但 是 如 果 JSO 星 期 (W) 1998，2004 
属于 去 年 或 明年 ， 就 使 用 它 来 表示 今年 
Y 年 份 ，4 位 数字 1999，2003 
y 年 份 ，2 位 数字 99，03 
a 上 午 ， 下 午 小写) am, pm 
A 上 上 年， 下午 (大 号) AM, PM 
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《 续 ) 
格 式 说 阴 示 例 
g 小 时 《12 时 制 )， 不 会 补 零 1~12 
G 小 时 (24 时 制 )， 不 会 补 零 0~23 
h 小 时 〈12 时 制 )， 不 足 时 补 零 01~12 
H 小 时 (24 时 制 )， 不 足 时 补 零 00 ~ 23 
i 分 钟 ， 不 足 时 补 零 00~59 
S 秒 钟 ， 不 足 时 补 零 00 ~ S9 
u 毫秒 ， 不 足 时 补 零 001 ~ 999 
O 用 小 时 和 分 钟表 示 与 GMT 的 差异 +1030 
P 用 小 时 和 分 钟表 示 与 GMT 的 差异 ， 带 冒号 -08:00 
g 当前 系统 设 定 的 时 区 EST、MDT、PDT-……- 
Z 用 秒 数 表示 的 时 区 偏 移 量 〈 西方 为 负数 ， 东 方 为 正 数 ) -43200 ~ 50400 
c ISO-8601 的 日 期 格式 2007-04-17T15:19:21+08:00， 
2007-04-17T15:19:212Z 
与 Unix Epoch 《January 1 1970 00:00:00 GMT》 相差 的 秒 数 1193432466，-2138434463 


11.17.2 扩展 string 


EXT 为 字符 串 类 型 提供 了 几 个 工具 函数 ， 如 下 所 示 。 

口 escape (String string): 它 会 对 字符 串 中 的 “'” 和 “\” 进 行 转 义 处 理 。 

口 format (String string, String valuel，String value2): 它 为 我 们 提供 了 一 个 
简单 的 自 定义 模板 ， 第 一 个 参数 传递 一 个 包含 替换 标志 的 字符 串 ， 后 面 的 参数 会 根据 替 
换 标志 放 到 对 应 的 位 置 上 ， 如 下 所 示 。 


Var cls = 'my-class', text = 'Some text'; 
Var ss = String.format('<div class="{0}">{1}</div>', cls, text):; 


得 到 的 s 值 将 是 '<div class="my-class">Some text</div>'。 

D leftPad(String string, Number size，[String char]): 它 保证 string 的 长 度 不 
能 小 于 size 的 值 。 如 果 不 够 ， 就 在 左 侧 使 用 第 三 个 参数 char 指 定 的 字符 补 齐 ， 如 下 面 的 
代码 所 示 。 


var s = String.leftPad{'123', 5, '0'); 


上 面 代码 中 得 到 的 s 值 将 是 '001231'。 
Q toggle (String value，String other): 如 果 当 前 字符 串 与 第 一 个 参数 相同 ， 就 返回 
第 二 个 参数 ， 否 则 返回 第 一 个 参数 ， 如 下 面 的 代码 所 示 。 


Sort = sort.toggle('ASC', ‘DESC'); 
Bort = (WOrt == AC WF DESC* & ‘ASC' Ys 


以 上 两 条 语句 的 效果 是 相同 的 ， 当 sort 与 'AsSc' 相 同时 就 返回 'DESC'， 否 则 返回 'ASC'。 
trim() 清 空 字符 串 两 侧 空白 ， 如 下 面 的 代码 所 示 。 


var 5 = ' foo bar 
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Lertt 光 // 获 得 "- foo bar -" 
alert('-' + s.trim{() + '-'); // 获 得 "-foo bar-" 


11.17.3 扩展 Function 


Function 是 JavaScript 中 的 一 个 默认 类 型 ， 所 有 的 函数 都 是 它 的 实例 。EXT 扩 展 了 Function 
类 型 ， 为 JavaScript 中 的 所 有 函数 增加 了 扩展 功能 。 
createcallback() 函数 会 创建 当前 函数 的 回调 函数 ， 如 下 面 的 代码 所 示 。 


var sayHi = function{name)t 
alert{('Hi, ' + name); 
} 


new Ext.Buttont{{ 
text: 'Say Hi', 
renderTo: Ext.getBody () ， 
handler: SayHi .createcallback('Fred') 
) ) 7; 
单 击 示 例 中 的 按钮 ， 就 会 弹出 “Hi，Fred” 的 提示 框 ， createCallback() 的 作用 是 为 原 
有 的 参数 设置 默认 参数 。 像 上 例 中 那样 , 在 使 用 createcallback () 时 就 已 经 将 ,Fred' 设 置 给 对 
应 的 回调 函数 ， 单 击 按钮 后 就 会 将 参数 传递 给 sayHi ( ) 。 
createDelegate( [Object obj], [Array args], [Boolean/Number appendArgs] ) 
函数 会 创建 当前 函数 的 代理 函数 ， 如 下 面 的 代码 所 示 。 


var sayHi = function{tnarme)({ 
alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.'}:; 
} 


Var btn = new Ext.Buttonl(t 
text: 'Say Hi', 
renderTo: Ext.getBody() 

})3 


btn.on('click', sayHi.createDelegate{btn, ['Fred'])); 


createDelegate() 用 来 为 当前 函数 设置 代理 , 主要 功能 是 改写 函数 中 的 this 引 用 。 示例 中 
createDelegate() 的 第 一 个 参数 是 btn，sayHi () 函数 中 的 this .text 会 引用 btn .kext， 获 得 
它 的 数值 ' say Hi '。 如 果 将 btn 改 为 其 他 对 象 ，sayHi ( ) 函数 中 的 this 会 自动 引用 到 指定 对 象 的 
text 属 性 。 

createDelegate() 还 可 以 使 用 数组 的 形式 为 被 代理 函数 设置 默认 传递 的 参数 。 这 种 用 法 与 
上 面 的 createcallback() 有 些 类 似 , 但 它 的 最 主要 用 法 还 是 修改 被 代理 函数 中 的 this 引 用 ， 避 
免 出 现 作用 域 丢 失 的 问题 。 

createInterceptor (Function fcn，[object scope]) 函 数 为 当前 函数 设置 拦截 器 ， 如 
下 面 的 代码 所 示 。 


Var sayHi = function (name)t{ 
alert{'Hi, ‘' + name); 
} 
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sayHi('Fred'); // 提示 "Hi,， Fred" 


Var SayHiToFriend = sayHi ,createInterceptor (function{(name){ 


return name == 'Brian'; 
}); 
sayHiToFriend('Fred'); // 没有 提示 
sayHiToFriend('Brian'); // 提示 "Hi, Brian" 


上 例 中 为 sayHi () 设置 了 一 个 拦截 器 ,拦截 器 会 在 原 函 数 执行 之 前 执行 ， 并且 只 有 在 拦截 器 
返回 crue 时 才 会 去 执行 原 函 数 。 如 果 拦 截 器 返回 的 值 是 false， 就 会 中 斯 执行 。 上 例 中 ， 只 有 在 
参数 为 'Brian' 的 情况 下 才 会 返回 true， 所 以 只 有 参数 为 'Brian' 时 才 会 执行 sayHi () 。 

createSequence( Function fcn，[Object scope] ) 函 数 会 使 参数 Ecn 和 当前 函数 按 顺 
序 依次 执行 ， 如 下 面 的 代码 所 示 。 


var sayHi = function{name)t{ 
alert('Hi, ' + name); 
} 


sayHi('Fred')}; // 提示 "Hi, Fred" 


Var sayGoodbye = sayHi.createSequence(function (name){ 
alerc( "Bye， " + name}); 
})， 


sayGoodbye('Fred'); // 提示 两 次 


上 例 中 ， 使 用 了 createsequence() 后 ， 会 先 执行 sayHi () ， 然 后 执行 createsequence () 
中 设置 的 函数 ， 两 者 依次 执行 。 

与 createInterceptor{) 不 同 的 是 , createInterceptor() 设置 的 参数 在 原 函 数 执行 之 前 
执行 ， 而 且 createsequence() 中 设置 的 返回 值 也 不 能 影响 原 函 数 的 执行 。 


defer{({Number millis, [Object obj], [Array args], [Boolean/Number 
appendargs] ) 函数 会 使 当前 函数 延迟 执行 ， 如 下 面 的 代码 所 示 。 
var SayHi = ftunction(fname){ 
alert( " Hi， ' + name); 


} 
sayHi ( “Fred ') ; 


sayHi .defer{(2000, this, ['Fred')); 


(function()i{ 
alert ('Anonymous'): 
}) .defer (100); 


上 面 演示 了 几 种 使 函数 延迟 执行 的 方法 ， 如 果 没 有 使 用 aefer() ，sayHi () 就 会 立刻 执行 ， 
而 Qefer() 可 以 让 函数 延迟 2 秒 后 再 执行 。 但 是 ， 这 需要 我 们 为 say8i () 配置 对 应 的 作用 域 和 传 
递 参数 。 
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11.17.4 扩展 Number 


EXT 只 为 数字 类 型 添加 了 一 个 函数 : constrain(Number min, Number max)。 
我 们 可 以 使 用 它 判 断 某 个 数字 变量 是 否 在 设置 的 范围 内 。 如 果 变 量 值 在 设置 的 范围 内 , 就 返 
回 原 值 ;， 否则 ， 就 返回 靠近 边界 的 数值 ， 如 下 面 的 代码 所 示 。 


var num = 50; 

alert (num.constrain{0,100)); 
alert (num.constrain{60,100)},; 
alert (num.constrain{0,40)); 


上 例 中 ， 第 一 次 返回 50， 第 二 次 返回 60， 第 三 次 返回 40。 


11.17.5 扩展 Array 


EXT 中 为 数组 对 象 添加 了 两 个 函数 : indexof () 和 remove ()。 

indexof (Object o) 函数 首先 检测 传 入 的 参数 是 否 包 含 在 数组 中 ， 如 果 o 还 没有 加 入 数组 ， 
就 返回 -1; 否则 ， 返 回 o 所 在 的 索引 值 。remove (object o) 函数 会 将 指定 的 参数 从 数组 中 删除 ， 
如 果 o 还 没有 加 入 数组 ， 就 不 会 执行 任何 操作 。 


11.18 “门户 组 件 Ext .ux.Portal 


Ext .ux.Portal 是 以 Ext .Panel 为 基础 编写 的 一 个 扩展 组 件 , 我 们 可 以 把 它 当 作 页 面 上 可 以 
随意 控 放 的 几 个 小 窗口 ， 如 图 11-23 所 示 。 


rs EN mw 一 mmorree ET 
RSE | wth -pene -> y -7 
| Per potag poren 


图 11-23 ”使 用 Ext .ux .Portal 进 行 页 面 布局 


图 11-23 中 ， 页 面 右 侧 部 分 使 用 的 就 是 Ext .ux .Portal 的 布局 方式 ， 我 们 在 其 中 摆 放 了 3 个 
Ext .ux.Portlet 窗 口 ， 小 窗口 中 分 别 显示 各 自 的 内 容 。 可 以 随意 拖 动 这 3 个 Portlet， 让 它们 按照 
我 们 的 想法 进行 摆 放 ， 如 图 11-24 所 示 。 

实际 上 Ext .ux.Portal 只 是 一 个 使 用 了 ColumnLayout 布 局 方式 的 Ext . Panel， 在 它 内 部 使 
用 的 Ext .ux.Portal .Dropzone 限 制 了 我 们 创建 的 Ext .ux.Portlet 只 能 在 本 列 或 列 与 列 之 间 
进行 拖 动 。 这样, 无论 如 何 拖 动 ，Ext .ux.Portal 都 可 以 保证 最 终 显示 的 布局 不 会 发 生 太 大 的 变 
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化 。 为 了 保证 每 个 Ext .ux.Portlet 可 以 在 拖 动 后 自动 适应 每 列 的 宽度 ，Ext .ux.Portalet 使 用 





pp go 
tasxl = | 
font al Per 
Mia, 
poial 
, 


图 11-24 通过 拖 动 改变 Portal 布 局 


如 果 想 自 定义 一 个 Ext .ux.Portal， 需 要 首先 引入 examples/portal 目 录 下 的 几 个 脚本 文件 和 
CSS 样 式 文件 ， 如 下 面 的 代码 所 示 。 


<script type="text/javascript" src="../portal/Portal.js"></script> 
<Script type="text/javascript" src=",../portal/PortalColumn.js"></script> 
<script type="text/javascript" src="../portal/Portlet,js"></script> 
<link rel="stylesheet'" type="text/css" href="../portal/portal.css" /> 


上 面 代码 中 引入 了 Portal.js、PortalColumn.js 和 Portlet.js 这 3 个 脚本 文件 ， 以 及 一 个 portal.css 样 
式 文件 ， 这 样 就 可 以 在 项 目 中 应 用 Ext .ux.Portal 了 。 创 建 Ext .ux.Portal 的 实例 的 代码 如 下 
面 所 示 : 


Var viewport = new Ext .Viewport!{t{ 
layout: ‘border', 
items: I{[{ 
region: 'west', 
width: 200, 
layout: 'accordion', 
items: [{ 
title: "taskli', 
html: ‘taskl' 
ya 4 
title: "tagskz’, 
html: 'task2' 





} ] 
ts 
region: 'center', 
xtype: 'portal', 
items: [1{ 
colummWidth: 0.33, 
style: 'padding:10px 0 10px 10px', 
items:[t{ 
title:: 'portall'., 
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height: 200, 
html: '‘'portall' 
}] 
ja 
columwidth: 0.33, | 
style: 'padding:10px 0 10px 10px', 


items;:[{ 
title: ‘portal2', 
height: 200, 


Ptm]l : 'portal2' 
}] 
ki 
columwidth: 0.33, 
style: ‘padding:10px 0 10px 10px'， 


items:[t{ 
title: 'portal3', 
height: 200, 


html: 'portal3' 


2 


上 例 中 使 用 了 Ext .Viewport 对 整个 页 面 进行 布局 ， 页 面 的 左 侧 放置 的 是 一 个 accordion 折 过 
菜单 ， 右 侧 部 分 使 用 的 就 是 Ext .ux .Portal。 我 们 将 这 个 Portal 分 成 三 个 宽度 相等 的 列 ， 并 在 每 
一 列 中 都 放置 了 一 个 Ext .ux.Portlet。 为 了 便于 区 分 ， 我 们 分 别 为 这 3 个 Portlet 设 置 了 标题 和 内 
容 ， 并 将 它们 的 高 度 都 设置 为 200 px， 最 终 得 到 的 就 是 图 11-23 中 所 显示 的 效果 。 

得 益 于 EXT 中 灵活 的 布局 方式 ， 我 们 可 以 在 Portlet 中 添加 之 前 所 讲 到 的 任何 组 件 ， 如 果 我 们 
之 前 已 经 创建 了 表格 、 树 形 或 表单 ,那么 不 需要 对 这 些 实例 进行 额外 的 配置 就 可 以 直接 放 入 Portlet 
中 进行 显示 ， 如 下 面 的 代码 所 示 。 


Var viewport = new Ext .Viewport (ti 
layout: 'border', 
items: [({ 
region: ‘west', 


width: 200, 
layout: '‘'accordion', 
items: [{ 


title: ‘taskl', 
htm] : 'taskl' 

| 
title: 'task2', 
html: '‘'task2' 

}] 

古本 

region: 'center', 

xtype: 'portal', 

items: [|({ 
columWidth: 0.33, 
style: 'padding:10px 0 10px 1l0px', 
items:[{ 
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title: ‘portall', 
height: 200, 
layout: 'fit', 
items: [grid] 
}] 
ka 
columnWidth: 0.33, 
style: 'padding:10px 0 10px 10px', 
iterms: [{ 
title;:; ‘portal2°', 
height: 200, 
layout: ‘fit', 
items: [tree] 
}] 
a 
columnWidth: 0.33, 
style: 'padding:1i0px 0 10px 10px'， 
zems: [{ 
title: 'portal3', 
height: 200, 
amtks Et, 
items: [form] 
}] 
}] 
}] 
Es 


上 例 中 ， 我 们 为 3 个 Portlet 都 设置 了 layout : ' fit'， 然 后 使 用 items 参 数 将 表格 、 树 形 和 表 
单 分 别 放 入 对 应 的 Portlet 中 ， 最 终 得 到 的 效果 如 图 11-25 所 示 。 


上 
3 











Visa "| 


图 11-25 在 Portlet 中 使 用 表格 、 树 形 和 表单 


11.19 桌面 组 件 Ext .Desktop 


Ext .Desktop 是 EXT 提 供 的 用 于 在 浏览 器 上 模拟 操作 系统 界面 的 一 套 组 件 , 它 主要 包括 以 下 
几 个 主要 的 组 件 。 
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D Ext .ux.StartMenu; 模拟 操作 系统 桌面 左下 方 的 开始 菜单 。 

D Ext .ux.TaskBar: 模拟 操作 系统 桌面 右 下 方 的 任务 栏 。 

O Ext .Desktop: 模拟 整个 操作 系统 的 桌面 。 

口 Ext.app.App: 对 应 整个 应 用 。 

口 Ext.app.Module; 对 应 整个 应 用 中 的 各 个 功能 模块 。 

利用 Ext .Desktop 组 件 模拟 的 桌面 效果 如 图 11-26 所 示 。 

因为 Ext .Desktop 并 不 是 EXT 库 的 核心 ， 所 以 在 使 用 它 之 前 ， 我 们 需要 先 将 对 应 的 脚本 和 
CSS 样 式 文件 引入 页 面 ， 如 下 面 的 代码 所 示 。 


<script type="text/javascript" Src=".， 
<script type="text/javascript" src=".. 


<script type="text/javascript" src=", 
<script type="text/javascript" src=". 
<script type="text/javascript" src=". 


/desktop/js/StartMenu.js"></script> 
/desktop/js/TaskBar.js"></sgcript> 


/desktop/js/Desktop.js"></script> 
/desktop/js/App.js"></script> 
/desktop/js/Module.js"></script> 


<link rel="stylesheet" type="text/css" href="../desktop/css/desktop.css'" /> 





/1/ 初始 化 


图 11-26 ”使 用 Ext. Desktop 组 件 模拟 的 桌面 效果 


我 们 将 examples/desktop/js 目 录 下 的 5 个 脚本 文件 和 1 个 CSS 样 式 文件 引入 页 面 , 这 样 就 可 以 使 
用 Ext .Deskop 模 拟 操作 系统 桌面 的 显示 效果 了 。 
使 用 Ext .Desktop 的 第 一 步 是 创建 一 个 Ext .app .App 的 实例 ， 如 下 面 的 代码 所 示 。 


MyDesktop = new Ext.app.Appl(t 


init ;function()t 
Ext .QuickTips.init!(); 


}, 


// 创建 模块 


getModules : function(){ 


return [ 


new MyDesktop.MyModule!{) 


3 
}， 


// 配置 开始 菜单 


getStartConfig : 
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return { 

title: “EXT ， 

iconCls: ‘'user', 

toolItems: [{ 
text: ' 配 置 '， 
iconCls: 'settings', 
scope: this 

} ， a 
text: ' 注 销 '， 
iconCls: ‘logout', 
scope: this 

}] 


} 

}); 

与 前 面 介绍 的 大 多 数 EXT 组 件 不 同 ， 在 创建 Ext .Desktop 时 ， 不 需要 使 用 Ext .onReady () 
指定 页 面 加 载 完成 后 执行 的 初始 化 函数 。EXT 会 在 页 面 加 载 完 成 后 ， 自 动 调用 Ext .app.App 的 
init() 函数 对 整个 页 面 进行 初始 化 。 

在 init () 初 始 化 函数 执行 后 ，EXT 会 自动 调用 getModules () 和 getstartConfig() 函 数 对 
整个 应 用 进行 配置 。 

getModules() 函数 会 返回 一 个 包含 多 个 Ext.app.Module 实 例 的 数组 ， 每 个 Ext .app. 
ModGule 实 例 都 代表 应 用 中 的 一 个 功能 模块 。 这 些 功 能 模块 都 将 以 弹出 窗口 的 形式 显示 到 桌面 上 , 可 
以 使 用 模拟 桌面 的 开始 菜单 的 Ext .ux.StartMenu 展 开 这 些 功 能 模块 的 窗口 ， 如 图 11-27 所 示 。 

对 于 已 经 展开 的 窗口 ， 也 可 以 通过 模拟 桌面 下 方 的 任务 栏 的 Ext .ux.TaskBar 控 制 某 个 窗口 
的 显示 或 隐藏 ， 如 图 11-28 所 示 。 





图 11-27 在 Ext .ux.StartMenu 中 选择 图 11-28 ”使 用 Ext .ux .TaskBar 隐 藏 窗口 
展开 某 个 功能 模块 的 窗口 


Ext .app.App 中 的 startCconfig() 函数 主要 用 来 配置 开始 菜单 的 选项 。 上 例 配 置 了 两 个 按钮 ， 
名 称 分 别 为 “配置 "和 “注销 ” 可 以 像 之 前 对 待 普通 菜单 项 一 样 对 它们 进行 配置 , 设置 对 应 的 text、 
iconCls、 scope 等 参数 ， 也 可 以 设置 handler 在 用 户 点 击 时 执行 对 应 的 操作 。 

在 介绍 完 模拟 桌面 的 整体 配置 之 后 ， 我 们 来 讨论 一 下 如 何 为 模拟 桌面 创建 功能 模块 。 上 例 中 
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创建 了 一 个 名 为 MyDesktop .MyMode1 的 功能 模块 , 并 在 Ext .app .App 的 getModules {) 函数 中 对 
其 执行 了 初始 化 操作 。 下 面 来 看 一 下 这 个 功能 模块 是 如 何 创建 的 ， 如 下 面 的 代码 所 示 。 


MyDesktop.MyModule = Ext.extend(Ext.app.Module, { 
id: ‘win-x', 
init : function(){ 
this.launcher = { 
text: 窗口 ，， 
iconCls: 'bogus '， 
handler : this.createWindow, 
scope: this, 
windowId;: 'x' 


}, 


createWindow : function(src)t{ 
var desktop = this.app.getDesktop(); 
var win = desktop.getWindow!( 'window-x-win'}):; 
if(!win)t{ 
win = desktop.createWindow!|{ 
id: 'window-x-win'， 
title:' 窗 口 '， 
width:640, 
height:480, 
html: '<p> 内 容 </p>' ; 
iconCls: 'bogus '， 
shim: false, 
animCollapse: false, 
constrainHeader: true 
}) ; 
} 
win.show!(); 
} 
下 


上 面 的 示例 就 是 我 们 为 Ext .app .App 创 建 的 一 个 功能 模块 ,在 为 Ext .app.app 创 建功 能 模块 
时 ， 都 要 继承 EXT 提 供 的 Ext .app .Module， 这 个 类 中 只 定义 了 一 个 init () 函数 ， 需 要 重 写 这 个 
函数 来 实现 我 们 的 功能 。 

一 般 只 需要 在 init () 函数 中 定义 一 个 launcher 对 象 , 它 是 一 个 JSON 对 象 , 内 部 包含 了 启动 
这 个 功能 模块 所 需要 的 一 些 配 置 。 当 在 Ext .ux. startMenu 中 点 击 对 应 的 功能 模块 时 ， 就 会 执行 
launcher 中 定义 的 handler 属 性 ， 弹 出 这 个 功能 模块 对 应 的 窗口 。 

在 上 例 中 ,launcher 的 handler 属 性 对 应 着 自身 的 createwindow() 函数 。 在 这 个 回调 函数 
中 ， 我 们 先 通过 this.app.getDesktop() 获得 整个 应 用 对 应 的 模拟 桌面 ， 然 后 使 用 
desktop.getwindqow('window-x-win') 判 断 功 能 模块 对 应 的 窗口 是 否 已 经 存在 .如 果 窗 口 还 没 
有 创建 ， 就 调用 desktop .createwindow() 创建 这 个 窗口 ， 并 显示 出 来 。 

除了 使 用 Ext .ux.StartMenu 显 示 功 能 窗口 之 外 ,我 们 还 可 以 使 用 桌面 上 的 快捷 方式 启动 对 
应 的 功能 模块 ， 点击 模拟 桌面 上 放置 的 图 标 或 链接 ， 就 可 以 让 对 应 的 功能 窗口 直接 显示 出 来 ， 如 
图 11-29 所 示 。 
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图 11-29 ”使 用 快捷 方式 启动 功能 模块 


Ext .Desktop 中 将 快捷 方式 称 为 shortcut， 我 们 不 需要 写 任 何 代码 来 配置 快捷 方式 ， 只 需要 
在 为 标签 和 对 象 命 名 时 遵守 一 定 的 规则 即 可 。 
在 模拟 桌面 上 显示 的 快捷 方式 时 所 使 用 的 HTML 标签 如 下 所 示 。 


<dl id="x-shortcuts"> 
<dt id="win-x-shortcut" class="grid"> 
<a href="#"><img src=",../desktop/images/s.gif" /> 
<div>Grid Window</div></a> 
</dt> 
<dt id="win-x-shortcut" class="im"> 
<a href="#"><img src="../desktop/images/s.gif" /> 
<div>Accordion Window</div></a> 
</dt> 
</dl> 


如 上 面 的 代码 所 示 ， 模 拟 桌 面 上 的 快捷 方式 都 必须 包含 在 id="x-shortcuts*" 的 dl 标签 中 ， 
dl 标签 中 包含 的 每 个 at 标签 都 将 成 为 一 个 快捷 方式 。 这些 at 标 签 的 id 属性 都 以 -shortcut 结 尾 ， 
将 id 属性 中 的 -shortcut 部 分 去 掉 后 ,得 到 的 就 应 该 是 这 个 快捷 方式 所 对 应 的 功能 模块 的 ia。 比 
如 ， 上 例 中 <at idq="win-x-shortcut"> 对 应 的 功能 模块 就 是 ia:'win-x' 的 功能 模块 。 

至 此 , 我 们 将 Ext .Desktop 模 拟人 桌面 组 件 完整 地 介绍 了 一 遍 , 希望 大 家 可 以 使 用 它 制作 出 自 
己 的 模拟 桌面 。 


11.20 小结 


本 章 首先 介绍 了 EXT 提 供 的 各 种 工具 函数 ， 然 后 介绍 了 如 何 使 用 pomHelper 和 Template 生 
成 DOM 片 段 ， 重 点 介绍 了 模板 相关 的 Template 类 和 XTemplate 类 。 同 时 还 讨论 了 如 何 为 EXT 中 
的 组 件 设置 提示 信息 ， 并 介绍 了 多 种 配置 方法 。 

本 章 演示 了 如 何在 项 目 中 使 用 EXT 提 供 的 悬 停 提 示 ， 并 提供 了 多 种 配置 方式 。 此 外 还 讨论 了 
如 何 使 用 Ext .state 保 存 组 件 的 状态 及 可 能 引发 的 问题 ， 并 给 出 了 解决 方案 。 而 且 介绍 了 EXT 中 
包含 的 各 种 辅助 工具 类 和 EXT 对 JavaScript 的 一 些 扩展 。 

最 后 ， 本 章 展示 了 Ext .ux .portal 和 Ext Desktop 这 两 个 精美 的 组 件 。 
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本 章 内 容 

口 确定 整体 布局 

口 使 用 HTME 和 CSS 设 置 静 态 和 信息 
口 对 学 生 信息 进行 数据 建 模 

O 在 页 面 中 显示 学 生 信息 列表 

D 添加 表单 编辑 学 生 信 息 

口 为 表单 添加 提交 事件 

口 清空 表单 信息 

口 删除 指定 的 学 生 信 息 

9 在 表格 和 表单 之 间 进 行 数 据 交互 
D 提升 加 载 速 度 


本 章 将 综合 运用 前 面 所 学 的 知识 ， 开 发 一 个 简单 的 学 生 信息 管理 系统 〈 如 图 12-1 所 示 )。 该 
系统 的 主要 功能 包括 : 显示 学 生 信息 、 添 加 学 生 信息 、 修 改 学 生 信息 ， 以 及 删除 学 生 信息 。 这 些 
功能 的 实现 非常 简单 ， 这 里 将 演示 如 何在 EXT 中 实现 这 些 常用 功能 。 


学 生 信息 管理 


ee PN tes 
掌 举 钥 避 性 苏 歼 放 而 用 旺 呐 所 本 提 学 号- 

2002015 张江 和 男 2 印 筑 |] 姓名 : 
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7002003 秽 心 男 3 Ei 四 川 有 有 斩 理 亲 伐 TH: 

1002084 于 小田 男 33 Ei] 重大 市 村 时节 二 性 史 1 才 

3002005 王 历 万 | bt 澡 1b 考 立法 举 舌 系 幅 沿 而 骸 ; 人 

1007006 。 员 孙 这 点 1 Nx 重重 特 列 行 时 旧 交 机 宪 候 古山- 

p0200 人 金 靖 避 页 硬 为 山西 省 + 半 机 侍候 _ 

03009 首长 怕 奥 22 复员 北京 击 数理 字 训 HE 

93009 作 癌 二 23 Ll 安 铀 寺 所 志 字 代 版 项 | EE | 
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2002001 王 弄 傅 齐 加 [i 膨 江 者 + 各 机 信 第 
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图 12-1 学 生 信息 管理 系统 界面 
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12.1 确定 整体 布局 


在 动手 实现 这 些 功能 操作 之 前 , 首先 应 该 确定 页 面 的 整体 布局 。 在 这 里 , 我 们 用 BorderLayout 
把 页 面 分 隔 成 4 个 部 分 ， 最 上 方 显示 系统 的 名 称 ， 最 下 方 显示 版 权 信 息 ， 中 间 部 分 左 侧 显 示 学 生 


信息 列表 ， 中 间 部 分 右 侧 中 的 表单 用 来 添加 或 修改 学 生 信 息 。 
实现 上 述 布 局 效果 的 代码 如 代码 清单 12-1 所 示 。 


代码 清单 12-1 实现 学 生 信 息 管 理 系统 的 布局 


Ext .onReady (function{) { 
var viewport = new Ext .Viewport1(1{ 
layout: 'border', 
items: [{ 
region: 'north':’, 
html: ‘head' 
,和 
region: 'center', 
html: ‘'grid' 
Fa 
region: ‘east', 
html:; 'form’ 
FZ 4 
region: 'South'， 
html: ‘foot!'! 
}] 
下 
}); 


使 用 Ext .Viewport 为 整个 页 面 进行 布局 设置 , 其 中 每 个 部 分 都 直接 用 HTML 参 数 做 了 标记 。 
这 个 布局 的 显示 效果 如 图 12-2 所 示 。 





图 12-2 学 生 信息 管理 系统 布局 效果 图 


如 图 12-2 所 示 , 现在 看 到 的 只 是 一 个 空白 的 框架 , 每 一 部 分 的 具体 内 容 都 需要 进一步 去 实现 。 
无 论 该 学 生 信息 管理 系统 的 功能 多 么 复杂 ， 都 不 会 超出 目前 框架 中 的 布局 设计 。 接 下 来 ， 我 们 来 


逐一 实现 各 个 部 分 的 功能 。 
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12.2 使 用 HTML 和 CSS 设置 静态 信息 


用 于 显示 标题 和 版 权 信息 的 文字 都 是 静态 的 ， 可 以 直接 调用 HTML 中 设置 好 的 内 容 。 在 
Ext . Panel 中 添加 静态 信息 的 方式 有 如 下 两 种 。 
D HTML 参 数 ， 它 让 我 们 可 以 直接 在 JavaScript 脚 本 中 写 上 静态 信息 的 内 容 。 
D contentE1 参 数 : 它 引用 页 面 中 某 一 个 div 的 ida， 在 显示 Panel 时 将 这 个 aiv 中 的 内 容 显示 
在 对 应 的 布局 域 中 。 
相对 而 言 ，HTML 参 数 更 适合 简单 的 内 容 。 如 果 需 要 引入 复杂 格式 的 静态 信息 ， 还 是 应 该 使 
用 contentE1 参 数 。 在 这 个 示例 中 ， 我 们 就 选择 了 contentE1 参 数 为 头 部 和 底部 制定 静态 信息 部 


分 的 内 容 ， 实 现 方 法 如 代码 清单 12-2 所 示 。 
代码 清单 12-2 在 布局 中 设置 静态 内 容 


Var Viewport = new Ext.Viewport ({ 
layout: 'border', 
items: [{ 

region: 'north', 
contentEl: ‘head' 
}, 1{ 
region: ‘center', 
html: 'grid' 
Fx: 
region: 'east', 
html: ‘form’' 
ke 贡 
region: 'South'， 
contentEl: '‘'foot' 
}] 
}); 


在 上 面 的 代码 中 ， 显 示 在 上 方 的 north 部 分 引用 的 contentE1l 是 'head'， 它 在 页 面 中 的 内 容 
如 下 所 示 。 
<div id="head" style="font-weight:bold;font-size:200%;"> 学 生 信息 管理 </qdiv> 


显示 在 下 方 的 south 部 分 引用 的 contentE1 是 ' foot'， 它 在 页 面 中 的 内 容 如 下 所 示 。 


<div id=*foot" style="text-align:right;"> - &copy’; 2008 <a 
href="http://www.familyl168 .com" target="_ blank">www.familyl68.com</a> - </div> 


因为 这 两 部 分 的 标签 内 容 都 会 在 EXT 进 行 页 面 布 局 时 重新 提取 和 设置 , 所 以 在 开始 时 不 用 考 
虑 把 这 两 个 aiv 写 到 页 面 的 什么 位 置 ， 只 要 把 它们 写 到 页 面 里 ，EXT 就 会 自动 进行 布局 ， 把 它们 
放 到 预 设 的 位 置 。 

设置 过 contentE1 后 ， 整 个 页 面 就 变 成 了 图 12-3 的 样子 。 这 里 演示 的 效果 比较 简单 ， 结 合 使 
用 了 HTML 标 签 和 CSS， 为 标题 设置 字体 (加 粗 ) 和 字号 ( 变 大 ), 版 权 信 息 则 是 右 对 齐 并 设置 了 
超 链接 。 在 实际 项 目 中 ， 可 以 把 美工 设计 出 来 的 页 面 标签 直接 复制 到 对 应 的 div 下 ， 刷 新 页 面 后 
就 会 显示 在 对 应 的 位 置 。 
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学 生 信 息 管理 
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图 12-3 ”上 下 部 分 加 入 静态 信息 的 效果 


12.3 ”对 学 生 信 息 进行 数据 建 模 


接 下 来 我 们 要 实现 对 学 生 信 息 进行 实际 操作 的 功能 。 用 Java 编 写 后 台 脚本 ， 用 Hsqldb 数 据 库 
作为 保存 数据 的 介质 。 首 先 要 在 数据 库 中 创建 学 生 信息 数据 表 ， 如 代码 清单 12-3 所 示 。 


代码 清单 12-3 ”创建 学 生 信 息 表 


create table StudGent 
id bigint, -- 
code varchar(50)，-- 学 号 
name varchar(50)，-- 姓名 
sex integer，-- 人 性 别 
age integer，-- 年 龄 
political varchar(50)，-- 政治 面貌 
origin varchar(50)，-- 籍 
professional varchar(50) -- 所 属 系 
让 
alter table student 
add constraint pk_student primary key {id); 
alter table student 
alter Column id bigint generated by default as identity {start with 1, increment by 1); 


这 张 student 表 中 包含 8 个 字段 ， 分 别 对 应 学 生 的 各 种 详细 信息 。 最 后 两 行 不 是 标准 的 ANSI 
SQL 语句 ， 这 是 Hsqldb 中 的 特有 功能 ， 表 示 把 ia 字段 设置 成 student 表 的 唯一 主键 ， 并 由 数据 库 
服务 器 控制 自动 增长 。 

在 本 示例 中 将 它 作 为 圣 入 式 内 存 数据 库 ， 只 要 把 hsqldb-1.8.0 7.jar 放 到 WEB-INFJlib 目 录 下 就 
可 以 了 ， 不 必 再 去 安装 和 配置 外 部 服务 器 。Hsqldb 数 据 库 会 在 JDBC 第 一 次 连接 时 启动 ， 从 
WEB-INF/classes 目 录 下 的 test.scripts 和 test.properties 两 个 文件 中 加 载 初始 数据 , 其 后 的 所 有 操作 都 
会 在 内 存 中 进行 , 唯一 的 缺陷 是 以 这 种 方式 运行 的 数据 都 保存 在 内 存 里 。 一 旦 服务 器 关闭 就 会 导 
致 数据 丢失 ， 下 次 重新 启动 数据 库 时 将 无 法 得 知 上 次 执行 过 何 种 操作 ,我 们 看 到 的 数据 依然 是 从 
test.scripts 和 test.properties 中 读 取 的 初始 化 数据 。 有 关 Hsqldb 数 据 库 的 详细 信息 可 以 去 它 的 官方 网 
站 www.hsqldb.org 查 看 。 

在 下 面 的 讨论 中 ， 我 们 将 尽量 使 用 标准 的 ANSI SQL 语句 ， 保 证 可 以 在 不 同 的 数据 库 上 正常 
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运行 。 对 于 不 得 不 使 用 Hsqldb 数 据 库 的 特定 功能 的 SQL 语句 ， 我 们 会 对 它们 进行 单独 讨论 。 
对 应 已 经 建立 好 的 数据 表 结 构 ， 我 们 编写 了 一 个 与 数据 库 表 结构 对 应 的 JavaBean 一 一 
student ,java， 这 个 JavaBean 中 的 字段 与 数据 库 表 中 的 字段 是 一 一 对 应 的 ， 如 代码 清单 12-4 所 示 。 


代码 清单 12-4，” 学 生 信息 领域 模型 


package com.familyl168.student; 


public class Student 1 
private long id; 
private String code; 
private String name; 
private int sex; 
private int age; 
private String political; 
private String origin; 
private String professional; 


public long getIid() { 
return id; 
} 


public void setIQ(long ia) { 
this.id = 1a; 


} 
// 获取 方法 和 设置 方法 
} 


这 是 一 个 简单 的 JavaBean， 它 的 每 个 属性 对 应 了 student 表 中 的 一 个 字段 ， 我 们 将 数据 库 中 
的 字段 映射 为 Java 对 象 ， 在 后 面 的 操作 里 就 可 以 为 它们 添加 特定 的 逻辑 操作 。 

直接 操作 student . java 的 类 叫做 studaentDao . java，DAO 是 Data Access Object 的 简写 ， 它 
主要 负责 student . java 和 数据 库 之 间 的 数据 转换 。 比 如 ，pagedQuery() 会 把 从 数据 库 中 读 取 
的 数据 放 入 Student . java 对象 中 ， 并 按照 特定 的 形式 返回 。insert () 和 update() 方 法 则 是 将 
student .java 中 的 数据 保存 到 数据 库 中 。remove() 方 法 执行 的 是 删除 操作 , 它 会 根据 指定 的 ia 
从 数据 库 中 删除 对 应 的 对 象 ， 

这 些 对 数据 库 的 操作 实际 上 都 是 大 同 小 异 的 , 每 次 先 打开 与 数据 库 的 连接 , 然后 执行 查询 或 
更 新 操作 ， 最 后 关闭 连接 并 释放 资源 。 

我 们 将 获得 数据 库 连接 的 部 分 代码 封装 在 一 个 叫做 DbUtils .java 的 工具 类 中 ， 如 代码 清单 
12-5 所 示 。 
代码 清单 12:5 “数据 库 工 具 类 

package com.familyl168.student; 

import java.sql.*; 

public class DbUtils { 


static { 
try 攻 
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Class.forName ("org.hsqldb.jdbcDriver"); 
) catch(Exception ex) { 
System,.,err.printin(ex); 
} 
} 


static Connection getConn() throws Exception { 
return DriverManager.getConnection("jdbc:hsgqldb:res:/test", "sa", ""): 
} 


static void close(ResultSet rs, Statement state, Connection conn) ({ 
if (rs != null} { 
try 1 
rs.close(): 
} catch (SQLException ex) I 
ex.printstackTrace {); 
} 
rs = null; 
} 
if (state {= null) 1{ 
try 1 
state.close(); 
) catch{(SQLException ex) { 
ex.printSstackTrace (); 
} 
state = null; 
} 
dF Veon Ys Hull 4 
try 1 
conn,close{):; 
} catch (Exception ex) { 
ex.printSstackTrace ();，; 
} 
conn = null; 


} 


这 是 一 个 工具 类 , 不 需要 使 用 new 关 键 字 实例 化 就 可 以 直接 调用 其 中 的 方法 ，static{} 静 态 
初始 化 时 加 载 Hsqldb 的 JDBC 了 驱动 ， 其 后 每 次 执行 getconn() 方 法 就 可 以 得 到 一 个 与 数据 库 的 连 
接 。close() 方 法 提供 了 一 种 关闭 数据 库 连 接 并 释放 资源 的 简便 方法 ， 使 用 它 可 以 一 次 性 关闭 
ResultSet、Statement 和 Connection 3 个 对 象 ， 方 法 内 自动 检测 对 象 是 否 为 nul1， 可 以 放心 
使 用 。 

在 StudentDao. java 中 统一 通过 DbUtils. java 来 获得 数据 库 连 接 , 以 此 实现 对 数据 库 的 操 
作 ， 比 如 remove() 方 法 中 就 是 先 通 过 DbUtils 的 getconn() 方 法 获得 数据 库 的 连接 再 进行 删除 
操作 的 ， 如 下 面 的 代码 所 示 。 


public void remove{long id) throws Exception { 
String sgl = "delete from student where id=?"; 





Connection conn = DbUtils.getConn(); 
PreparedStatement State = conn.prepareStatement (sql); 
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State,.SsetLong(1，id): 


state.executeUpdace ( ) ; 
DbuUtils.close{null, state, conn); 
} 


先 用 DbUtils .getconn() 获 得 数据 库 链接 ， 然后 准备 SQL 语句 对 应 的 Statement。 设置 指 
定 的 ia 后 ， 调 用 Statement 和 executeUpdate() 执行 删除 操作 ， 最 后 不 要 和 态 记 用 
DbUtils.close() 关 闭 与 数据 库 的 连接 释放 资源 。 

男 外 两 种 更 新 数据 库 的 方法 与 remove () 相似 ，insert() 和 updaate( ) 分 别 使 用 的 是 SQL 中 
的 insert 和 update 语 句 , 再 将 作为 参数 的 student . java 对 象 设 置 到 statement 中 执行 更 新 , 实 
现代 码 请 参考 studentDao . java 中 的 内 容 ， 这 里 就 不 再 教 述 了 。 

pagedouery() 中 的 查询 功能 比较 复杂 ， 需 要 详细 讨论 一 下 。 下 面 看 一 下 其 中 的 代码 部 分 ， 
如 代码 清单 12-6 所 示 。 


代码 清单 12-6 pagedQuery () 


public Page pagedQuery (int start, int limit, String sort, String dir) throws 
Exception { 


String sql = "select limit " + start + " * + limit + " * from student"; 

if {sort != null && !sort.equals{("") && dir != null && Idir.equals("")} { 
sql += ”order by " + sort + " + dir; 

} 

Connection conn = DbUtils.getConn(); 

Statement state = conn.createstatement ( ) ; 


ResultSet rs = state.executeQuery (sql); 
List result = new ArrayList{f) : 
while (rs.next ())} { 
Student student = new Student{(); 
Student .setId{(rs.getLong("id")):; 
Student .setCode(rs.getstring{"code")).; 
student .SetName (rs.getString("name'")); 
student.setSex(rs.getIint ("sex")); 
student .setAge(rs.getInt ("age")):; 
student .setPolitical (rs.getSstring ("political")); 
student .setOrigin{rs.getString{"origin")):; 
student .setProfessional (rs.getSstring("professional")); 
result ,add(student ) ; 
} 
rs = state.executeQuery("select count(*) from student"); 
int totalCount = 0; 
if (rs.next ()) { 
totalCount = rs.getIint (1); 
} 


DbUtils.closelrs, state, conn); 


Page page = new Page [totalCcount，result) ; 
return page; 
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pagedouery () 方 法 的 4 个 参数 分 别 是 start、1imit、sort 和 dir。start 和 1imit 用 来 进行 
分 页 查询 ，start 表 示 从 第 几 条 数据 进行 查询 ，1imit 表 示 最 多 返回 几 条 查询 数据 。sort 和 adir 
用 来 对 查询 的 结果 进行 排序 , sort 表 示 对 哪个 字段 进行 排序 , air 表 示 排 序 时 使 用 升序 还 是 降序 。 

为 了 实现 分 页 和 排序 功能 ，pagedQuery () 方 法 首先 要 根据 传递 过 来 的 参数 生成 对 应 功能 的 
SQL 语句 。 

String sql = "Select limit " + start + " " + limit + " * from student"; 


上 上面 是 从 student 表 中 进行 查询 ， 并 依据 start 和 1imit 的 内 容 进行 分 页 。 这 里 的 "select 
limit " + start + " " + limit 不 是 标准 的 ANSI SQL 语句 ， 而 是 Hsqldb 专 门 为 分 页 查询 提 
供 的 功能 。 很 遗憾 的 是 ， 标 准 ANSI SQL 中 没有 提供 分 页 查询 的 功能 ， 基 本 上 每 个 主流 数据 库 都 
提供 了 自己 的 分 页 查询 方式 , 这 些 方式 又 完全 不 相同 。 如 果 你 想 把 这 个 示例 转换 到 其 他 数据 库 上 ， 
必须 将 这 里 的 分 页 查询 部 分 修改 为 对 应 数据 库 的 SQL 语句 。 


if {sort {= null && !sort.equals("") && dir != null && !dir.equals("")) { 
sql += " order by "+ Sort + " " + dir; 


} 


生成 排序 功能 的 SQL 语 句 比 较 简 单 ， 只 需要 判断 sort 和 dir 是 否 为 空 。 如 果 不 为 空 ， 就 可 以 
直接 附加 到 原来 的 SQL 的 后 面 ， 对 获得 的 查询 结果 实现 排序 。 

得 到 了 需要 的 SQL 语 句 之 后 ， 我 们 立刻 进行 查询 ， 通 过 statement 和 Resultset 把 每 一 条 返 
回 的 记录 都 转换 成 student .java 对 象 ， 放 入 到 ArrayList 中 。 

接 下 来 还 需要 获取 数据 库 中 的 总 记录 数 ， 对 应 的 SQL 语句 为 select count(*) from 
student， 这 是 一 条 标准 的 ANSISQL 语 句 ， 不 用 做 任何 修改 就 可 以 在 所 有 的 主流 数据 库 上 运行 。 
使 用 这 条 SQL 语句 ， 我 们 获得 了 数据 库 中 保存 的 学 生 信息 的 总 数 。 

现在 可 以 关闭 数据 库 连接 ,把 学 生 信息 总 数 totalcount 和 本 页 显示 的 学 生 信息 列表 result 
放 入 Page. java 对 象 中 并 返回 。 

至此， 我 们 完成 了 数据 建 模 部 分 代码 的 编写 ， 对 应 的 源 代 码 放 在 WEB-INF/src 目 录 下 ， 编 译 
后 的 代码 放 在 WEB-INF/classes 目 录 下 。 供 对 应 的 JSP 或 其 他 Java 类 调用 ， 通 过 这 些 类 ， 我 们 可 以 
访问 数据 库 获 得 需要 的 查询 结果 ， 也 可 以 通过 这 些 类 对 数据 库 中 的 数据 进行 更 新 。 


12.4 在 页 面 中 显示 学 生 信 息 列表 


后 台 的 数据 库 和 Java 代 码 都 已 经 准备 妥当 ， 现 在 编写 显示 学 生 信息 列表 的 表格 部 分 的 代码 ， 
如 代码 清单 12-7 所 示 。 


代码 清单 12-7 前 合 表格 部 分 的 实现 代码 


Var sexRenderer = function(value) { 





if (value == 1) { 
return '<span Style=*color:redifont-weight:bold;"> 男 </span> ' ; 
} else if (value == 2) { 


return '<span style="color:green;font-weight:bold;"> 女 </span>'; 
} 
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var StudentRecord = Ext.dGata.Reccrd.create( [ 
{name: 'id', type: ‘'int'}, 
{name: 'code', type: 'string'}, 
{name: 'name', type: ‘string'}, 
{name: ‘sex', type: 'int')， 
{name: 'age', type: 'int')， 
{name; ‘political', type: 'string'}, 
{name: 'origin', type: 'String' ) ， 
{name: 'professional', type: 'string'} 


Var Store = new Ext.data.Store{{ 
Proxy: new Ext.data.HttpProxy{{url: './jsp/list.jsp'}), 
reader: new Ext .data.JsonReader{{ 
totalProperty: ‘totalCount', 
root: ‘result' 
},StudentRecord), 
remoteSort: true 
4 汶 
store.load{{params: {start:0,1imit:15}}); 


Var columns = new Ext.grid.ColumnModel{[ 
{header: ' 学 号 '，dataIndex: 'code')， 
{header: ' 姓 名 '，dataIndex: 'name']， 
{header: ' 性 别 '，dataIndex: 'sex', renderer: sexRenderer}，, 
{header: ' 年 龄 '，dataIndex: 'age'}， 
{header: ' 政 治 面貌 '，daataIndex: 'political'}, 
{header: ' 籍 丑 '，aataInadex: 'origin' ) ， 
{header: ' 所 属 系 ' ，dataIndex: 'professional'} 
js 
columns .defaultSortable = true; 


Var grid = new Ext .grid.GridPanel l(t 
title: ' 学 生 信息 列 表 '， 
region: 'center', 
loadMask: true, 
store: store, 
cm: columns, 
sm; new Ext .grid.RowSelectionModel ({singleSelect:true}), 
viewConfig: { 
forceFit: true 
},， 
bbar: new Ext.PagingToolbar({ 
pageSize: 15, 
store: store, 
displayIinfo: true 
| 
}); 


sexRenGerer 是 一 个 工具 函数 ， 它 用 来 在 表格 中 显示 学 生 的 性 别 。 数 据 库 中 sex 字 段 的 类 型 
为 int， 我 们 用 1 代表 “ 男 ”，2 代 表 “ 女 ” sexRendaerer 中 使 用 if 语句 判断 当前 行 的 sex 值 。 在 1 
的 情况 下 显示 红色 粗 体 的 “ 男 ” 在 2 的 情况 下 显示 绿色 粗 体 的 “ 女 ”。 之 后 sexRenderer 会 作为 


Download at Pin5i.Com 


http://52pdf.taobao.com 


12.4 在 页 面 中 显示 学 生 信 息 列 表 355 


columnModel 的 一 部 分 设置 到 表格 中 ， 负 责 显示 “性 别 ” 这 一 列 的 内 容 。 

studentRecord 部 分 使 用 Ext .data.Record 的 create() 函数 创建 了 一 个 类 , 就 像 之 前 在 数 
据 建 模 的 过 程 中 使 用 JavaBean 对 数据 库 进行 映射 一 样 ，EXT 中 也 对 student 的 数据 进行 了 封装 。 
这 样 就 可 以 在 表格 的 store 中 和 表单 的 reader 中 直接 使 用 这 个 预定 义 的 类 型 , 避免 了 重复 定义 相 
同 的 数据 类 型 。 

接 下 来 的 Ext .data.Store 就 利用 了 上 面 的 StudentRecord 类 型 ， 处 理 从 后 台 获 得 的 信息 。 
它 使 用 Ext .data.HttpProxy 从 jsp/list.jsp 中 获得 学 生 信 息 列 表 的 信息 ， 返 回信 息 中 的 
totalProperty 和 root 两 个 参数 分 别 指定 了 后 台数 据 的 记录 总 数 和 当前 页 面 显 示 信 息 的 队列 ， 
这 些 数 据 最 终 都 会 显示 在 表格 中 。 

创建 好 store 之 后 ， 随 即 调用 store.1load({params: {start:0,1imit:15)})) ;进行 分 页 查 
询 ， 这 里 传递 的 两 个 参数 start 和 1imit， 表 示 从 第 一 条 记录 开始 查询 ， 最 多 获得 15 条 记录 。 这 
部 分 与 后 台 的 jspylistjsp 交 互 的 操作 将 在 后 面 详细 讨论 。 

下 面 的 工作 是 创建 Ext .grid.columnModel， 将 表格 中 每 列 显示 的 数据 与 store 中 的 数据 相 
对 应 。 建 立 好 列 模 型 后 ， 再 调用 columns .defaultsortable = true; 将 所 有 列 都 设置 成 可 排序 
的 。 排 序 功 能 也 可 以 通过 为 每 一 列 设置 sortable:true 来 实现 , 但 是 逐一 设置 会 比较 烦琐 , 不 如 
统一 设置 方便 。 

万 事 俱 备 只 欠 东 风 ， 表格 需要 的 组 件 部 分 都 准备 好 了 , 现在 可 以 创建 表格 来 显示 学 生 信 息 列 
表 了 。 为 了 不 使 表格 显得 寒酸 ， 除 了 上 面 提 到 的 store 和 columns 之 外 ， 我 们 还 为 表格 设置 了 标 
题 title。 用 loadaMask:true 开 启 读 取 数 据 时 的 提示 功能 ， 这 会 在 每 次 store 去 后 台 读 取 数 据 时 
自动 显示 等 待 提示 信息 。sm: new Ext.grid.RowSelectionModel ({singleSelect:true}) 
限制 用 户 每 次 只 能 选中 一 行 ， 这 是 为 了 后 面 与 表单 进行 互 操作 所 做 的 准备 。viewCconfig: 
{forceFit: true} 自 动 调整 每 列 的 宽度 ， 使 整个 表格 更 加 饱满 。 最 后 还 为 bpbar 添 加 了 分 页 工具 
条 ， 可 以 用 它 进行 表格 的 分 页 跳 转 和 数据 刷新 操作 。 

Region:'center' 表 示 把 这 个 表格 放 到 BorderLayout 的 中 间 位 置 。 接 下 来 ， 我 们 调整 原来 
Viewport 中 的 配置 ， 把 之 前 放 在 中 间 的 Panel 替 换 为 创建 好 的 表格 ， 如 代码 清单 12-8 所 示 。 


代码 清单 12-8 -将 表格 加 入 页 面 


Var viewport = new Ext .Viewport ({ 
layout: 'border', 
items: [{ 

region: 'north', 
contentEl: ‘head' 
yengridy { 
region: 'east', 
html: 'form' 
}, 1{ 
region: 'south', 
contentEl: ‘foot' 





}] 
J 


最 终 的 显示 效果 如 图 12-4 所 示 。 
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图 12-4 ”加 入 表格 后 的 页 面 效 果 


因为 我 们 没有 为 右 侧 的 表单 部 分 设置 宽度 ， 所 以 viewport 自 动 为 它 计 算 了 一 个 最 小 宽度 ， 结 
果 位 于 中 间 的 表格 几乎 布 满 了 整个 页 面 。 从 图 12-4 中 可 以 看 到 , 表格 中 显示 了 每 列 对 应 的 数据 ,“ 性 
别 ” 这 一 列 也 按照 sexRenderer 中 定义 的 那样 显示 得 错落 有 致 。 现在 可 以 单 击 表格 下 部 的 分 页 工 
具 条 上 的 按钮 查看 分 页 查询 的 效果 ， 也 可 以 单 击 某 一 列 的 首部 ， 查 看 按 列 排序 的 功能 。 

看 过 了 页 面 的 效果 , 我 们 再 回 到 后 台 看 看 为 前 台 提 供 数据 的 listjsp 中 的 内 容 , 如 代码 清单 12-9 
所 示 。 


代码 清单 12-9 listjsp 


<%@ page contentType="application/json;charset=utf-8" import="com. family168.student. 
| 名 > 二 笔 
request .setCharacterEncoding{"utf-8"); 
response.setCharacterEncoding ("utf-8"); 
int start = 0; 
try { 
start = Integer.parseInt (request .getParameter ("start")); 
} catch (Exception ex) { 
System.err .printlnl(ex); 
} 
int limit = 15; 
try { 
limit = Integer .ParseInt (request ,getParameter ("limit"})); 
} catch (Exception ex) { 
System.err.println (ex); 
} 
String sort = request.getParameter{("sort"); 
String dir = request.getParameter ("dir"); 


StudentDao dao = StudentDao.getInstance () ; 
Page pager = dao.pagedQuery (start, limit, sort, dir); 


out .Print (pager .tostring{()); 
第 > 
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listjsp 中 的 代码 可 以 分 成 3 部 分 ， 如 下 所 述 。 

(1) 第 一 部 分 ， 设 置 JSP 使 用 的 contentType 和 encodqing， 因 为 Ajax 在 访问 后 台 时 ， 默 认 使 
用 UTF-8 作 为 请 求 和 响应 时 传递 的 数据 的 默认 编码 ， 而 在 Tomcat 服 务 器 中 ， 使 用 的 默认 编码 是 
ISO-8859-1。 这 种 编码 的 差异 会 在 传递 中 文字 符 时 出 现 乱码 ， 所 以 首先 需要 把 请 求 和 响应 的 编码 
都 统一 设 为 UTF-8。 

(2) 第 二 部 分 ， 处 理 前 台 传 递 的 参数 ， 包 括 start、1imit、sort、dir 等 4 个 参数 ， 这 4 个 参 
数 在 12.3 节 中 已 经 讨论 过 。 start 和 1imit 用 来 进行 分 页 查询 , start 表 示 从 第 几 条 数据 开始 查询 ， 
limit 表 示 最 多 返回 几 条 查询 数据 。sort 和 dir 用 来 对 查询 的 结果 进行 排序 ，sort 表 示 对 哪个 字 
段 排序 ，dir 表 示 排 序 时 使 用 升序 还 是 降序 。 

因为 使 用 HTTP 协 议 只 能 传递 字符 类 型 的 参数 ， 所 以 在 listjsp 中 ， 我 们 要 对 这 几 个 参数 进行 
类型 转换 。 注 意 ， 在 有 可 能 出 现 转换 失败 的 情况 时 ， 需 要 为 对 应 的 参数 设置 默认 值 ， 这 里 默认 设 
置 start 为 0，1imit 为 15。 

(3) 第 三 部 分 ， 将 获得 的 4 个 参数 传递 给 stuaentDao， 获 得 分 页 结果 对 象 ， 最 后 调用 page 的 
tostring() 方 法 ， 将 它 生成 的 内 容 返 还 给 前 台 处 理 。 

将 studentDao 设 计 成 一 个 单 例 模式 singleton)， 这 样 可 以 在 当前 系统 中 保证 只 创建 一 个 实 
例 ， 这 个 实例 被 其 他 类 所 共享 ， 避 免 了 重复 创建 对 象 造成 的 资源 浪费 。 

Page 的 tostring() 方 法 将 分 页 结果 转换 成 JSON 格 式 ， 这 个 功能 是 通过 student . java 和 
Page.java 了 两 个 类 中 的 tostring{() 方 法 来 实现 的 。 

Student .java 的 代码 如 下 所 示 : 


public String toString() { 
return "{id:* + id + 

",Code:'" + Code + 
“"',Name:'" + Name + 
"Sex:" + Sex + 
",age:" + age + 
",political:'*" + political + 
"Origin;'" + origin + 
"',professional:'"* + professional + 
“ev"， 

} 


Page.java 的 代码 如 下 所 示 : 


public String toSstring{) 1 
return "{totalCount:" + totalCount + *,result:" + result + hE 


} 


通过 这 两 个 方法 ，page.tostring{() 会 返回 一 个 符合 JSON 格 式 的 字符 串 ， 并 使 用 之 前 设置 
好 的 UTF-8 编 码 格式 发 送 给 前 台 。 前 台 EXT 接 收 到 的 内 容 如 代码 清单 12-10 所 示 。 


代码 清单 12-10 “前台 EXT 获 得 的 JSON 数 据 


{ 
totalCount:16, 
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result:[t{ 

3 
code:'2002015 ' ， 
name:' 张 光 和 '， 
Sex:1, 

age:21, 


political: ' 财 员 '， 
origin:' 湖 北 省 '， 
professional:' 物 流 工程 学 院 ' 
Ys 

id:2,， 

code:'2002002:,， 
name: ' 张 值 强 ' ， 

sex:1, 

age:22, 

political:' 党 员 '， 
origin:' 河 南 省 '， 
professional:' 动 力 工程 系 ' 
}] 

} 


totalCount 表 示 数 据 库 中 现 有 学 生 信 息 的 总 数 ，result 表 示 当 前 页 显示 的 信息 列表 ， 前 台 
获得 这 些 信 息 之 后 ， 就 可 以 把 这 些 数据 显示 到 表格 中 。 


12.5 ”添加 表单 编辑 学 生 信 息 


配置 好 表格 之 后 ， 添 加 一 个 表单 来 编辑 学 生 信 息 ， 如 代码 清单 12-11 所 示 。 
代码 清单 12-11 编辑 学 生 信息 的 表单 


Var form = new Ext .form.FormPanel ({ 
title: ' 编 辑 学 生 信息 '， 
region: 'east', 
frame: true, 
width: 300, 
autoHeight: true, 
labelAlign: ‘right', 
labelWidth: 60, 
defaultType: 'textfield’, 
defaults: ({ 

width: 200, 
allowBlank; false 
}, 
items: [{ 
xtype: 'hidden', 
name: ‘'id' 


fieldLabel: ' 学 号 :， 
name: ‘code' 

Fe 
fieldLabel: ' 姓 名 '， 
name: ‘name'’ 
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一 


fieldLabel: ' 年 龄 '， 
name: ‘'age', 

xtype: ‘numberfield', 
allowNegative: false 


fieldLabel: ' 性 别 '， 

name: 'sexText', 

hiddenName: '‘'sex', 

xtype: 'combo', 

store: new Ext.data.Simplestorel(t 
fields: ['value','text'], 
dabas: [LRT ] 

FB 

emptyText: ' 请 选择 '， 

mode: 'local', 

triggerAction: 'all', 

valueField: 'value'， 

displayField: '‘'text', 

readOonly: true 


fieldLabel: ' 政 治 面貌 ' ， 

name: :Political'， 

xtype: 'combo', 

store: new Ext .Gata.SimpLeStore({ 
fields: ['text'], 
data: [[' 群 众 '],[' 党 员 '],[' 团 员 ']] 

})，, 

emptyText : ' 请 选择 ' ， 

mode: 'local', 

triggerAction: 'all', 

valueField: ‘text', 

displayField: ‘text', 

readOonly: true 


fieldLabel: ' 籍 贯 '， 
name: 'Origin' 
}.4 
fieldLabel: ' 所 属 系 '， 
name: 'professional' 
bl 
buttons: [{ 
text: 添加 ， 
有 
text: '!' 清 空 
于 
text: “删除 ， 





}] 
3} 


我 们 把 这 个 表单 的 宽度 设置 为 300， 让 它 里 面 的 输入 组 件 对 应 的 文字 标签 都 右 对 齐 ， 其 中 的 
defaults 参 数 很 有 用 ， 在 它 里 面 设置 的 参数 会 自动 赋予 表单 内 部 的 输入 组 件 ， 这 样 内 部 组 件 的 
相同 配置 只 需要 配置 一 次 就 可 以 了 。 我 们 使 用 的 配置 是 { wiath: 200, allowBlank: false}， 


Download at Pin5i.Com 


http://52pdf.taobao.com 


360 第 12 章 一 个 完整 的 EXT 应 用 


每 个 组 件 的 宽度 都 设置 为 80， 而 且 不 能 提交 空 值 。 因 为 我 们 使 用 的 输入 组 件 大 多 是 textfield， 
所 以 把 aefaultType 设 置 为 ,textfield， 可 以 不 必 为 每 个 items 设 置 xtype。 

在 对 Ext . form.Formpanel 进 行 了 这 些 设置 之 后 , 我 们 可 以 把 学 生 信息 对 应 的 输入 控件 放 到 
items 中 。 其 中 “学 号 ”，“ 姓 名 ”“ 籍 贯 ”， “所属 系 ”都 是 textfield 类 型 , 因此 只 需要 配置 name 
和 fieldLabel。 

需要 使 用 xtype: 'hidden' 将 ia 字段 配置 为 隐藏 域 。 虽 然 在 页 面 上 看 不 到 它 ， 但 是 也 可 以 通 
过 后 面 的 IloadRecorad() 方 法 设置 ia 字段 的 数据 。 在 提交 表单 时 ， 它 里 边 的 数据 也 会 一 起 发 送 到 
后 台 ， 它 的 作用 和 <input type="hidden" name="id"> 是 一 致 的 。 

“年 龄 ”输入 框 限 制 用 户 只 能 输入 数字 ， 使 用 了 Ext . form.NumberField 数 字 输 入 组 件 ， 对 
应 使 用 了 xtype: 'numberfield'。 因为 人 的 年 龄 不 可 能 是 负数 ， 所 以 我 们 还 将 allowNegative 
设置 为 false， 不 允许 用 户 输入 负数 。 

虽然 “性 别 ” 和 “政治 面貌 ”使 用 的 都 是 Ext . form.ComboBox， 但 还 是 有 一 些 不 同 。 

虽然 “性 别 ” 这 个 ComboBox 选 择 的 是 “ 男 ” 和 “ 女 ”， 但 是 实际 上 传递 到 后 台 的 是 对 应 的 1 
或 2 两 个 整数 。 因 此 ， 在 配置 ComboBox 时 需要 将 displayField 和 valueFiela 分 开 使 用 ， 还 要 
配置 上 hiddenName， 否则 发 送 到 后 台 的 依然 是 显示 在 页 面 上 的 “ 男 ” 和 “ 女 ”， 而 不 是 与 之 对 应 
的 1 或 2 两 个 整数 。 

“政治 面 谣 ” 这 个 ComboBox 就 简单 了 许多 ,选择 的 文字 和 传递 给 后 台 的 数据 是 一 致 的 ， 只 需 
displayField 和 valueFiela 的 配置 相同 ， 不 需要 额外 配置 hiadaenName 参 数 。 

经 过 了 这 一 系列 的 配置 后 ， 我 们 得 到 了 一 个 可 以 用 来 编辑 学 生 信息 的 表单 ,效果 如 图 12.5 
所 示 。 

到 此 为 止 , 学 生 信息 管理 系统 的 整个 界面 已 经 制作 完成 , 但 是 还 不 能 利用 表单 对 学 生 信息 执 
行 添加 、 修 改 和 删除 等 操作 。 


学 生 信 息 管 理 

#9 姑 考 性 出 D412 政 沙 大 吉 其 骂 所 关系 学 和 ; 

2001015 人 熔 闪 和 | 2 加 名 抽 佬 裕 网 丙 工 程 单 院 姓名 

2002002 迷 梳 需 转 好 侈 章 丽 贞 去 雁 为 工程 系 

2002003 相 已 村 13 加 多 外 川 告 生地 学 扩 et 

2007004 王 小 委 由 23 EE 重庆 市 材料 学 院 秩 蒜 4 所 中 
2002005 王 亲 区 骨 22 半角 简化 党 立法 举 辽 系 册 祝 面 烷 1i 记 ~ 
2002005 FI 男 23 用 次 参 同 伸 惠 行政 再 计 杰 可 芥 入 断 黄 

2002007 会 媚 必 罗 2 EE 由 回击 让 是 顶 沧 院 机 

2002006 则 医 扒 血 2 合 勇 北京 击 数 埋 竹 近 

2002009 件 册 加 23 加 及 EL 机 栓 学 卫 [me |][ m2 ][ ) 
2002010 基 小 髓 奥 加 图 名 广 直 广陵 学 辽 

2002011 区 不时 入 25 二 内 交 因 省 [3 

2002012 低 恤 行 角 站 国外 好 田 省 共 姓 学院 

2002016 刘 最 胃 24 国 久 L440] 环 佛 工程 系 

2002014 LE 亦 A 使 邹 DL 站 滞 系 

2007001 王 辣 如 3 加 后 次 新 江 客 计算 因 学 级 

YY a PP 凤 里 示 1 - 5， 拓 3 基 

i - © 2008 ow, family!68. com - 


图 12-5 加 入 表单 后 的 界面 效果 
下 面 要 为 表单 的 按钮 设置 监听 事件 ， 在 单 击 相应 按钮 时 执行 对 应 的 操作 。 
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12.6 ”为 表单 添加 提交 事件 


在 上 面 的 表单 中 , 我 们 放置 了 3 个 按钮 , 分 别 是 “添加 ”“ 清 空 ” 和 “删除 ”。 首先 我 们 为 “ 添 
加 ”按钮 深 加 事 件 ， 为 它 的 handler 参 数 指定 一 个 处 理 函 数 ， 如 代码 清单 12-12 所 示 。 


代码 清单 12-12 ”表单 按 钥 的 单 击 事件 


{ 
text: ' 添 加 '， 
handler: function() { 
if (!form.getForm() .isvalid()) { 
return; 
} 
it (form.getForm().findrield("id") .getValue() == "*") { 
// 添加 
form.getForm() .submit {1{ 
Url; './jsp/save.jsp', 
success: function{f, action) { 
if (action.result.success) { 

Ext .Msg .alert(' 消 息 ',， action.result .msg, function(){ 
grid.getSstore{) .reload() ; 
form.getForm() .reset{); 
form.buttons[0] .setText(' 添 加 '}); 

}); 

} 
$3 
failure: function() { 
Ext .Msg .alert(' 错 误 '，" 添 加 失败 "); 
1 
二 
} else { 
// 修改 
form.getForm{() .submit(t 
url: './jsp/save.jsp', 
success: function{f, action) { 
if {action.result.success) { 


Ext .Msg .alert(' 消 息 ' ,action.result .msg, Eunction( ){ 


griad.getStore () .reload(): 
form.getForm() .reset ( ) ; 
form.buttons [0] .setText (' 添 加 '); 
3) 
} 
Ey 
failure: function() { 


Ext .Msg .alert (' 错 误 '， "修改 失败 ')， 
})s 
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在 handler 处 理 国 数 中 ， 首 先 调 用 form.getForm() .isvValid() 进 行 数据 校 验 。 如 果 返 回 
false， 说 明 表 单 中 某 些 输入 组 件 里 的 数据 还 无 法 通过 校 验 ， 不 应 该 提交 这 些 错 误 格 式 的 数据 ， 
这 时 我 们 应 该 直接 跳出 函数 ， 中 止 提交 操作 。 

如 果 表 单 顺利 通过 数据 校 验 检测 ， 我 们 便 进入 下 一 步 ， 准备 向 后 台 提 交 数 据 。 还 记得 我 们 刚 
才 讲 过 的 ia 对 应 的 隐藏 域 吗 ? 这 里 就 是 通过 它 的 数值 来 判断 本 次 提交 是 添加 操作 还 是 修改 操作 。 
如 果 form.getForm() .findField("id") .getValue{( ) 为 空 字符 串 ， 就 是 在 添加 数据 ， 如 果 它 
不 为 空 字符 串 ， 就 是 在 修改 一 个 已 有 的 数据 。 

虽然 我 们 对 添加 和 修改 操作 进行 了 区 分 , 但 是 在 实际 提交 代码 时 并 没有 太 大 区 别 , 只 是 在 提 
交错 误 时 分 别提 示 “ 添 加 失败 ”和 “修改 失败 ”而 已 。 让 我 们 通过 代码 清单 12-13 来 看 看 这 些 数 
据 是 如 何 提交 给 后 台 的 。 


代码 清单 12-13 ”将 数据 提交 给 后 台 
// 添加 


form.getForm() .submit({ 
Url: './jsp/save.ijsp', 
success: function(f, action) { 

if (action.result.success) { 

Ext .Msg .alert (' 消 息 ',， action.result.msg, function() { 
grid,.getStore().reload!(); 
form.getForm() .reset(); 
form.buttons [0] .setText (' 添 加 '); 

ls 

} 

}, 
failure: function() { 

Ext .Msg .alert(' 错 误 '， "添加 失败 *); 

} 

小 学 

这 里 的 form 表 示 我 们 前 面 创 建 的 Ext.form.Formpanel ， 它 的 getForm() 函数 返回 
FormPane1 内 部 对 应 的 Ext . form.BasicForm。 现 在 我 们 调用 BasicForm 的 submit () 函数 ， 将 
内 部 items 中 输入 组 件 的 值 提交 给 后 台 的 jsp/save,jsp。 

如 果 后 台 没 有 出 现 异 常 ， 而 且 返 回 的 JSON 信 息 中 包含 {success:true}， 那 么 就 会 执行 
success 参 数 对 应 的 处 理 函 数 。 在 success 处 理 函 数 中 , 我 们 创建 一 个 Ext .Msg .alert () 显示 响 
应 的 JSON 信 息 中 的 msg 部 分 的 内 容 。 在 用 户 关闭 alert 提 示 框 之 后 ， 调 用 grid.getstore(). 
reload() 刷 新 表格 中 的 数据 ， 同 时 调用 form.getForm() .reset() 清 空 上 次 提交 的 数据 。 

如 果 后 台 出 现 400 或 500 错 误 , 就 会 触发 tailure 参 数 对 应 的 处 理 函数 。 这 里 只 是 弹出 一 个 alert 
提示 框 告诉 用 户 “ 添 加 失败 ”， 等 竺 用户 对 刚才 提交 失败 的 信息 进行 修改 或 做 其 他 处 理 。 

在 添加 和 修改 信息 时 ， 都 是 提交 给 后 台 的 jsp/save.jsp 进 行 处 理 。save.jsp 这 个 文件 同时 负责 添 
加 和 修改 两 个 操作 ， 它 里 面 的 内 容 如 代码 清单 12-14 所 示 。 


代码 清单 12-14 save.jsp 


<%@ page contentType="application/json;charset=utf-8" import="com. familyl168.student. 
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万" 人 第 >< 和 % 
request .setCharacterEncoding ("utf-8"),; 
response.setCharacterEncoding("utf-8"),; 


String id = request .getParameter{"id"); 

String code = request.getParameter ("code"); 

String name = request .getParameter ("name"),; 

String sex = request .getParameter ("sex"); 

String age = request .getParameter ("age"); 

String political = request .getParameter ("political"); 
String origin = request .getParameter{"origin"); 

String professional = request .getParameter ("professional"); 


Student student = new Student{); 
student .setCode (code); 

student .SetName (name); 

Student .setSex(Integer.parseInt {sex)); 
student .setAge (Integer .parseInt (age)); 
Student .setPolitical (political); 
student .setOriginl(origin); 

student .setProfessional (professional):; 


StudentDao dao = StudentDao .getInstance ( ) ; 


if (id == null || id.equals("")) f 
dao.insert (student); 
} else { 


student.setId{Long .parseLong (id)); 
dao.update (studGent ) ; 
} 
out .print ("{success:true,msg:' 保 存 成 功 '}"); 
币 > 


与 之 前 讨论 过 的 listjsp 类 似 ， 它 里 面 的 处 理 过 程 也 大 致 分 为 3 步 。 

(1) 设置 JSP 使 用 的 contentType 和 encoding， 把 请 求 和 响应 的 编码 都 统一 为 UTF-8。 

(2) 处 理 前 台 传递 的 参数 ， 通 过 request .getParameter{) 方 法 从 请 求 中 获得 刚刚 提交 过 来 
的 学 生 信息 ， 创 建 一 个 Student . java 对 象 ， 将 对 应 的 学 生 信息 添加 到 对 象 中 。 这 个 过 程 中 要 注 
意 对 age 和 sex 两 个 参数 进行 数据 类 型 转换 ， 因 为 从 HTTP 请 求 中 只 能 获得 字符 串 ， 而 它们 都 需要 
在 其 后 转换 为 整数 类 型 。 

为 了 在 后 面 的 操作 中 区 分 添加 和 修改 操作 ， 我 们 没有 对 参数 id 进 行 处 理 。 

(3) 现 在 我 们 已 经 获得 了 提交 数据 ， 并 把 这 些 数据 都 放 到 了 对 应 的 student .java 对 象 中 。 现 
在 我 们 可 以 判断 参数 ia 的 值 ， 以 此 来 判断 后 面 要 执行 的 是 添加 操作 还 是 修改 操作 。 

与 前 台 EXT 提 交 数 据 代码 相似 ， 如 果 id == null || id.equals("")， 就 表明 应 该 执行 添 
加 操作 ， 执 行 StudentDao 的 insert () 方 法 。 否 则 ， 应 该 执行 修改 操作 ， 执 行 studaentDao 的 


update() 方法 。 
最 后 ， 只 要 未 出 现 异常 ， 我 们 就 认为 添加 或 修改 操作 成 功 了 ， 直 接 向 response 中 写 入 提示 
成 功 信 息 的 JSON 字 符 串 。 


out .print ("{success:true,msg:;' 保 存 成 功 '}"); 
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12.7 ”清空 表单 信息 


再 来 看 看 “清空 ”按钮 中 handler 对 应 的 处 理 函 数 。 


{ 
text: ' 清 空 '， 
handler: function() { 
form.getForm() .reset ( ) ; 
form.buttons [0] ,setText (' 添 加 '); 
} 
} 


它 的 作用 是 调用 form.getForm() .reset(); 清 空 表单 中 的 所 有 数据 ， 然 后 把 form. 
buttons [0] 也 就 是 表单 的 第 一 个 按钮 的 文字 修改 为 “添加 只 

reset 将 表单 恢复 到 初始 状态 。 如 果 刚 才 在 表单 中 添加 了 一 些 不 必要 的 数据 ， 又 不 想 逐 一 去 
删除 它们 ， 那 么 只 需要 单 击 这 个 按钮 就 能 清除 所 有 输入 框 中 的 数据 了 。 

Reset 还 有 一 个 功能 是 清空 隐藏 域 ia 中 的 数据 ， 因 为 ia 在 页 面 上 是 看 不 到 的 ， 所 以 无 法 手工 
删除 它 的 数据 ， 此 时 就 只 好 求助 于 “清空 ”按钮 了 。 如 果 想 从 “修改 ”状态 转换 到 “添加 ”状态 ， 
也 需要 它 的 帮助 。 

form.buttons [0] 从 表单 中 取出 排 在 第 一 位 的 按钮 。 我 们 一 共 设 置 了 3 个 按钮 , 第 一 个 是 “ 添 
加 ”按钮 ， 因 为 在 修改 学 生 信息 时 会 把 它 上 面 的 文字 改 为 “修改 ” 所 以 “清空 ”按钮 也 要 在 执 
行 reset () 之 后 把 它 的 文字 改 为 “添加 ” 才 行 。 


12.8 删除 指定 的 学 生 信息 


“删除 ”按钮 是 表单 上 的 第 三 个 按钮 ， 它 的 作用 是 删除 当前 显示 的 学 生 信息 。 既 然 是 从 数据 
库 中 删除 已 有 的 学 生 信息 ， 那 它 就 只 能 在 “修改 ”信息 的 状态 下 起 作用 。 因 为 在 没有 获得 学 生 信 
息 的 ia 之 前 ， 无 法 执行 删除 操作 。 

“删除 ”按钮 对 应 的 hanaler 处 理 函 数 如 代码 清单 12-15 所 示 。 


代码 清单 12-15 删除 学 生 和 信息 的 处 理 函数 


{ 
text: ' 删 除 '， 
handler: function() { 
var id = form.getForm() .findFieldl('id') .getVvalue{); 
ze {id == '') 1{ 


Ext .Msg.alert(' 提 示 '，' 请 选择 需要 删除 的 信息 。: ) ; 
} else { 
Ext .Ajax.request ({ 
url: ',./jsp/remove.jsp', 


success: function(response) ({ 
var json = Ext.decode (response ,responseText) ; 
if (json.success) { 
Ext .Msg.alert(' 消 息 '，json.msg, function{() { 
grid.getstore{) .reload ( ) : 
form,getForm( ) .reset({ ) ; 
form.buttons [0] .setText{' 添 加 '); 
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py 

} 
We 
failure: function{) { 

Ext .Msg .alert (' 错误 '， "删除 失败 "); 
bs 
params: "id=" + id 

}}; 
} 

} 

} 


处 理 消 数 首先 要 判断 form.getForm() .findField('id') .getValue() 的 值 是 否 为 室 ， 如 
果 iq 为 室 ， 表 示 还 没有 选择 需要 删除 的 信息 ， 这 时 会 弹出 提示 信息 ， 同 时 中 止 删除 操作 。 

如 果 id 不 为 空 , 表示 已 经 选择 了 需要 删除 的 信息 , 这 样 可 以 把 对 应 信息 的 id 发 送 到 后 台 执行 
删除 操作 。 与 “添加 ”按钮 不 同 的 是 ， 向 后 台 发 送 要 删除 的 信息 的 id 时 要 通过 Ext .Ajax 来 实现 ， 
因为 删除 操作 并 不 需要 将 表单 中 所 有 输入 组 件 的 数据 都 发 送 到 后 台 。 

使 用 Ext .Ajax.request () 函数 发 送信 息 时 ，url 参 数 表示 发 送 给 后 台 的 jsp/remove.jsp 脚 本 
进行 处 理 ，params 表 示 将 学 生 信息 的 id 作 为 参数 传递 给 后 台 。success 对 应 的 处 理 方法 会 在 响 
应 成 功 时 执行 ， 与 表单 不 同 的 是 ， 这 里 不 再 需要 在 响应 的 JSON 中 设置 {success:true}, 但 我 们 
需要 使 用 Ext .decode() 函数 将 啊 应 返回 的 response.responseText 字 符 串 手工 转换 为 JSON 对 
象 ， 然 后 用 Ext .Msg .alert () 显示 响应 中 的 提示 信息 。 响 应 成 功 后 ， 刷 新 表格 数据 ， 清 空 表单 
内 容 的 操作 与 之 前 的 添加 和 修改 操作 相同 。 

为 删除 操作 只 向 后 台 的 removejsp 发 送 需 要 删除 的 信息 的 idq, 所 以 remove.jsp 中 的 处 理 代 码 
也 比较 简单 ， 如 代码 清单 12-16 所 示 。 


代码 清单 12-16 remove.jsp 


<%@ page contentType="application/json;charset=utf-8" import="com.family168.student. 
全 下 竺 >< 务 

reGquest , SetCharactezrEncoding("utft-8" ) ; 

reSsponse .SetCharacterEncoding( "utft-8"): 


String id = reaquesc .9etParameter ("id"); 
StudentDao dao = StudentDao .getInstance( ) ; 
Gao ,removel(DLong .parseLong (id)); 


out .print("fsuccessitrue,msg:' 删 除 成 功 ' }") 
告 > 


这 里 我 们 还 是 先 设置 请 求 和 响应 的 编码 ， 然 后 从 请 求 中 获得 参数 id 的 值 ， 转 换 成 长 整 型 
(long) ， 调 用 stuaentDao 的 remove{) 方 法 执行 删除 操作 。 如 果 处 理 的 过 程 没有 出 现 异 常 ， 就 
说 明 删 除 操 作成 功 ， 最 后 向 响应 中 写 入 删除 成 功 的 提示 信息 。 

这 样 我 们 就 完成 了 删除 指定 学 生 信息 的 操作 。 


12.9 ”在 表格 和 表单 之 间 进 行 数据 交互 
我 们 在 上 面 已 经 实现 了 在 表格 中 显示 学 生 信息 列表 ， 也 实现 了 使 用 表单 对 学 生 信息 执行 汪 
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加 、 修 改 和 删除 等 操作 。 但 是 ， 表 格 和 表单 之 间 的 数据 还 无 法 交互 使 用 。 

一 个 尚未 解决 的 问题 是 , 如 何在 表单 中 显示 我 们 需要 修改 的 学 生 信息 ? 这 个 问题 也 适用 于 删 
除 操作 ， 如 果 我 们 不 提供 选择 某 一 条 学 生 记 录 的 方法 ， 那 么 修改 和 删除 操作 都 无 法 进行 。 

在 这 个 示例 中 , 我 们 希望 在 单 击 左 侧 的 表格 时 同步 更 新 右边 表单 中 的 数据 。 如 果 用 户 单 击 表 
格 中 的 某 一 行 ， 就 会 把 这 行 对 应 的 学 生 信息 放 到 表单 中 显示 ， 于 是 我 们 就 能 对 这 条 信息 进行 修改 
和 删除 操作 了 。 为 此 ， 我 们 要 给 表格 添加 一 个 事件 监听 函数 ， 专 门 处理 鼠 标点 击 事件 ， 如 下 面 的 
代码 所 示 : 

// 单 击 修改 信息 开始 


grid.on('rowclick', function(grid, rowIndex, event) { 
var record = grid.getStore{() .getAt{rowIndex); 
form.getForm() .loadRecord(record); 
form.buttons [0] .setText (' 修 改 '); 


Fy 
// 单 击 修改 信息 结束 


这 里 监听 的 事件 名 为 rowclick， 它 对 应 Ext .grid.RowSelectionMode1 的 监听 事件 ， 每 当 
用 户 选 中 表格 中 的 一 行 时 ， 就 会 触发 该 事件 。 事 件 被 触发 的 同时 还 会 执行 我 们 设置 的 监听 函数 。 

监听 函数 预 设 了 3 个 参数 .第 一 个 参数 grid 表 示 哪 个 表格 被 点 击 了 ; 第 二 个 参数 rowIndex 
表示 选中 了 哪 一 行 ，event 是 EXT 内 部 通用 的 事件 对 象 ， 我 们 在 这 里 没有 用 到 。 

在 单 击 事件 被 触发 ， 执 行 对 应 的 监听 函数 时 ， 首 先 通过 griad.getstore() .getat 
(rowIndex) ; 获得 被 选中 的 这 一 行 对 应 的 record。 这 个 record 是 保存 在 store 中 的 数据 ， 表 格 
上 没有 显示 出 来 的 id 也 包含 在 其 中 。 对 应 的 所 有 学 生 信 息 都 可 以 从 这 个 recora 中 获得 ， 但 并 不 
需要 从 record 中 把 学 生 信 息 逐 一 取出 来 , 然后 再 逐一 放 到 表单 中 。 表单 提供 的 loadRecora() 函 
数 可 以 一 次 性 将 record 中 的 数据 赋予 表单 中 的 输入 组 件 ， 只 要 保证 输入 组 件 的 name 或 
hiddenName 与 record 中 定义 的 属性 一 致 即 可 。 

在 使 用 loadRecord() 将 表格 中 选择 的 数据 复制 到 表单 中 以 后 ， 我 们 再 调用 form. 
buttons [0] .setText(' 修 改 '); 将 表单 中 的 第 一 个 按钮 的 文字 设置 为 “修改 ” 这样 用 户 就 知 
道 现 在 提交 表单 执行 的 是 对 某 一 条 学 生 信息 进行 修改 的 操作 。 如 果 要 继续 添加 新 的 学 生 信 息 ， 可 
以 单 击 “ 清 空 ” 按 钮 ， 它 会 将 刚刚 从 表格 中 复制 的 信息 都 清除 掉 ， 包 括 id 隐藏 域 中 的 数据 ， 还 会 
把 第 一 个 按钮 上 的 “修改 ”设置 为 “添加 ” 再 次 输入 数据 并 单 击 “ 提 交 ” 按 钮 ， 这 时 执行 的 就 
是 “添加 ”操作 了 。 

到 此 为 止 ， 我 们 用 前 面 学 过 的 知识 实现 了 一 个 完整 的 学 生 信息 管理 系统 。 其 中 涉及 
BorderLayout 的 布局 应 用 、 表 格 的 分 页 显示 和 数据 排序 、 表 单 的 提交 和 清空 、 利 用 Ajax 与 后 台 进 
行 数据 交互 、 通 过 事件 监听 实现 表格 与 表单 之 间 的 数据 交互 等 知识 。 

这 个 示例 虽然 简单 ， 但 基本 上 包含 了 所 有 的 常见 操作 ， 可 以 供 大 家 练习 时 参考 。 


12.10 ”提升 加 载 速 度 


在 本 节 中 ,我 们 将 基于 前 面 介绍 的 学 生 信息 管理 系统 , 讨论 一 下 如 何 提升 EXT 系 统 的 加 载 速度 。 
在 人 们 讨论 EXT 的 性 能 问题 时 ， 首 先 担心 的 就 是 ext-all.js 这 个 脚本 文件 的 体积 ，EXT 已 经 对 
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所 有 源 代 码 进 行 了 压缩 和 混淆 ， 它 只 是 压缩 混淆 之 前 的 版 本 ext-all-debug.js 大 小 的 1/4，ext-all.js 
的 大 小 是 610 KB，ext-all-debug.js 的 大 小 是 2341 KB。 我 们 从 这 一 点 就 可 以 看 到 EXT 已 经 在 应 用 性 
能 的 提升 方面 做 出 的 努力 了 。 

可 是 很 多 人 对 这 3/4 的 体积 减 小 并 不 满意 ， 他 们 还 期 望 继 续 减 小 网 络 传输 的 数据 量 ， 以 实现 
更 短 的 传输 时 间 , 让 应 用 能 够 更 快 地 呈现 在 用 户 面前 。 下 面 我 们 来 介绍 几 种 简单 易 用 的 调 优 方法 ， 
借助 这 些 方法 可 以 实现 在 不 影响 整体 功能 的 基础 上 提升 应 用 的 加 载 速度 。 


12.10.1 对 JavaScript 文件 进行 压缩 混淆 

我 们 建议 在 项 目 开发 完成 之 后 ， 系 统 上 线 之 前 ， 使 用 工具 将 项 目 中 的 JavaScript 文 件 整合 为 
一 个 ， 并 进行 压缩 ， 去 除 JavaScript 文 件 中 的 注释 、 多 余 换行 和 空格 符 。 再 对 JavaScript 文 件 进 行 
语法 混 消 ， 进 一 步 减 小 文件 的 大 小 。 

这 里 选用 yuicompressor 对 JavaScript 进 行 压缩 和 混淆 。yuicompressor 是 YUI 官 方 提供 的 
JavaScript 压 缩 工 具 ，EXT 也 使 用 它 对 源码 进行 压缩 与 混淆 的 操作 。 

我 们 通过 命令 行 执 行 yuicompressor， 执 行 命令 如 下 : 

java -jar yuicompressor-2.4.2.jar student.js -o student-min.js --charset UTF-8 

这 样 就 会 将 原来 项 目 中 的 studentjs 文 件 进行 压缩 混 消 , 生成 student-min.js 文 件 , 因为 student.js 
中 包含 中 文 ， 所 以 还 要 使 用 --charset 指 定 源 文 件 的 编码 为 UTF-8， 否 则 中 文 在 压缩 后 会 变 成 乱 
码 。 比 较 student-min.js 和 student.js 可 以 看 到 ， 压 缩 前 student.js 的 大 小 为 8KB， 上 压缩 后 student-min.js 
的 大 小 为 4KB, 减 小 了 50% 的 体积 。 随 着 项 目 中 JavaScript 文 件 总 数 的 增加 ,这 个 压缩 比率 还 会 继 
续 上 升 ， 可 以 说 对 项 目 中 的 JavaScript 文 件 进 行 压 缩 混 消 是 最 行 之 有 效 的 一 种 提升 性 能 的 方法 。 

注意 在 进行 JavaScript 文 件 的 压缩 和 混淆 时 要 保留 源 文件 ， 执 行 过 压缩 混淆 之 后 的 JavaScript 
文件 内 容 随 着 本 身体 积 的 减 小 ,也 会 变 得 不 适合 后 期 的 开发 维护 ， 要 避免 压缩 混淆 工具 毁坏 源码 
的 情况 。 

下 面 是 压缩 后 student-min.js 中 内 容 的 一 部 分 ， 从 中 可 以 看 到 代码 已 经 变 得 难以 阅读 了 ， 代 码 
如 下 所 示 : 


Ext .onReady (function{) {Ext .QuickTips.init();var g=function (h) {if (h==1)f{ 


12.10.2 ”使 用 客户 端 缓存 


客户 端 缓存 是 男 一 种 常用 的 用 来 提升 性 能 的 手段 ， 设 置 正确 的 话 ， 可 以 实现 所 有 静态 资源 只 
在 用 户 第 一 次 访问 应 用 时 进行 加 载 , 之 后 的 请 求 都 会 利用 本 地 缓存 ,不 需 重复 下 载 相同 的 静态 资源 。 

客户 端 缓存 主要 是 利用 了 HTTP 协 议 中 的 304 Not Modified 这 个 响应 状态 ， 当 客户 端 请 求 的 资 
源 在 服务 器 端 未 进行 修改 时 ， 服 务 器 就 会 返回 304 Not Modified 响 应 状态 ， 这 时 客户 端 就 会 直接 
利用 本 地 缓存 。 

我 们 可 以 使 用 Firebug 查 看 访问 应 用 时 客户 端 请 求 资源 以 及 服务 器 响应 的 状态 。 

当 客 户 端 第 一 次 访问 应 用 时 ， 请 求 资源 如 图 12-6 所 示 。 

从 图 12-6 中 可 以 看 到 , 第 一 次 访问 应 用 时 的 啊 应 状态 都 为 200 OK, 从 请 求 到 完成 加 载 ext-all.js 
总 共用 了 905 ms。 
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图 12-6 第 一 次 访问 应 用 时 的 请 求 状态 
如 果 现 在 刷新 一 下 页 面 ， 再 次 访问 应 用 ， 请 求 和 响应 就 会 变 成 如 图 12-7 所 示 的 状态 。 
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图 12-7 再 次 访问 应 用 时 的 请 求 状态 


从 图 12-7 中 可 以 发 现 , 再 次 访问 应 用 时 的 响应 状态 为 304 Not Modified, 因为 利用 了 本 地 缓存 ， 
ext-all.js 从 请 求 到 完成 加 载 总 共用 了 331 ms。 

上 面 的 比较 只 是 将 使 用 客户 端 缓存 前 后 的 情况 进行 了 简单 的 比较 , 实际 的 测试 数据 会 因为 网 
络 情况 的 不 同 而 出 现 改变 , 但 可 以 表 定 的 是 利用 了 客户 端 缓存 之 后 , 浏览 器 便 不 再 需要 在 每 次 请 
求 时 都 去 服务 器 上 下 载 ext-alljs 和 其 他 已 经 获得 的 资源 了 , 因此 也 不 会 出 现 因为 ext-alljs 体 积 过 大 
拖 慢 网 络 传输 速度 ， 从 而 影响 系统 响应 效率 的 问题 。 

默认 情况 下 , 浏览 器 和 服务 器 都 会 开启 对 本 地 缓存 功能 的 支持 ， 所 以 一 般 不 需要 再 去 进行 额 
外 的 配置 ， 在 需要 精确 控制 缓存 周期 时 可 以 参考 实际 使 用 服务 器 提供 的 文档 进行 相应 的 配置 。 


12.10.3 使 用 GZIP 压缩 


我 们 上 面 提 到 了 使 用 工具 对 JavaScript 文 件 进行 压缩 混淆 ， 进 而 实现 在 系统 加 载 时 传输 较 少 的 
数据 量 。 只 是 即便 EXT 对 所 有 代码 进行 了 压缩 混淆 ， 最 终 的 ext-alljs 体 积 依然 有 610 KB， 如 何 才能 
进一步 减 小 传输 的 数据 量 呢 ? 这 时 我 们 可 以 选择 使 用 GZIP 对 JavaScript 文 件 进行 进一步 的 压缩 。 

目前 市 场 上 的 主流 浏览 器 都 支持 对 GZIP 格 式 的 文件 进行 处 理 。 服 务 器 将 GZIP 压 缩 过 的 文件 
传输 给 浏览 器 ， 浏 览 器 在 接收 到 数据 之 后 ， 首 先进 行 解压 缩 将 文件 还 原 为 压缩 前 的 形式 ,然后 再 
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进行 加 载 。 这 种 方式 可 以 减 小 网 络 传输 数据 量 ， 对 浏览 器 端 造成 的 性 能 影响 也 能 保证 在 可 接受 的 
范围 之 内 。 

首先 使 用 工具 将 ext-alljs 压 缩 为 GZIP 格 式 ， 上 压缩 后 获得 文件 名 为 ext-all.gz.js， 现 在 可 以 比较 
一 下 两 者 体积 的 大 小 。 未 使 用 GIP 压 缩 的 ext-all.js 文 件 大 小 为 610 KB， 使 用 了 GZIP 压 缩 的 
ext-all-gz.js 大 小 为 167KB， 又 减 小 了 3/4。 

下 面 将 index.jsp 中 原来 引用 的 ext-all.js 部 分 代码 替换 为 ext-all.gz.js， 代 码 如 下 所 示 : 

<script type="text/javascript" src="ext-3.0.0/ext-all.gz.js"></script> 

接 下 来 还 需要 告诉 浏览 器 ，ext-all.gz.js 使 用 了 GZIP 格 式 ， 这 样 浏览 器 才 会 在 接收 到 数据 之 后 
对 ext-all.gz.js 进 行 解 讨 。 为 此 我 们 新 建 了 一 个 GzipFilterjava， 它 会 在 用 户 请 求 ext-all.gz.js 时 ， 向 
响应 中 添加 一 个 头 信息 ， 告 知 浏览 器 需要 使 用 GZIP 对 ext-all.gz.js 进 行 处 理 。 

GzipFilterjava 代 码 内 容 如 下 所 示 : 


package com.family168.student; 


import java.io.*; 
import javax.servlet.*; 
import javax,servlet.http.*; 


public class GzipFilter implements Filter { 
Public void init(FilterConfig filterConfig) 
throws ServletException { 
)} 


public voida destroy() { 
} 


Public void doFilter(ServletRequest request, 
ServletResponse response, 
FilterChain chain) 
throws IOException, 
ServletException ({ 


String url = ((HttpServletRequest) request) .getServletPath!{():; 
if (url.endsWith(".gz.js"})) { 

( (HttpServletResponse)response) .setHeader ("Content-Encoding", "gzip"):; 
} 


chain.doFilter (request, response}); 
} 
} 


这 样 ，GzipFilter 会 在 请 求 URL 以 .gzjs 结 尾 时 ， 自 动向 请 求 中 添加 内 容 为 "content- 
Encoding"，"gzip" 的 头 信息 ， 这 样 浏览 器 就 会 知道 如 何 处 理 对 应 的 信息 内 容 了 。 
为 了 使 GzipFilter 生 效 ， 我 们 还 需要 修改 web.xml， 在 其 中 添加 过 滤器 映射 ， 代 码 内 容 如 下 : 


<filter> 
<filter-name>gzip-filter</filter-name> 
<filter-class>com.family168.student .GzipFilter</filter-class> 
</filter> 


<filter-mapping> 
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<filter-name>gzip-filter</filter-name> 
<url-pattern>*.js</url-pattern> 
</filter-mapping> 


这 里 我 们 将 GzipFilter 配 置 为 监听 所 有 以 .js 结尾 的 请 求 ， 但 是 实际 上 它 只 会 处 理 以 .gz.jjs 结 尾 
的 请 求 。 

经 过 上 面 的 配置 之 后 ， 我 们 就 可 以 访问 应 用 ， 查 看 使 用 GZIP 压 缩 JavaScript 的 效果 了 ， 从 
Firebug 中 可 以 看 到 图 12-8 中 的 信息 。 


we 人 二 ‘ 
7 5 及 末 aoW 网 绍 - P Co 

洲 院 :| 所 有 Wm 5 和 和 和 榴 革 i 
= GET ext-allcss Ilocost:BO8D 139 KB rom | 
GET et 十 ase, 二 locahost: 080 3 KB c 

GET ext-alLgz.js Iocahost'8080 167 KB 107ms 

Hecaders 哈 冰 
坊 闫 买 东 名 


Server hpache-Corole/! 
Content-Encoding 5zip 
Accept-Ranges Yies 


Etag 中 1 36 
Last-Modified xcn a mr 
Content-Type te 

Content-Length 17}} 
Date Wn jw 4T CAT 


图 12-8 使 用 GZIP 压 缩 JavaScript 后 的 响应 效果 


从 图 12-8 中 可 以 看 到 ， 我 们 请 求 的 ext-allgz.js 只 有 167 KB， 对 应 的 响应 头 信息 中 包含 了 
Content-Encoding gzip 的 内 容 ， 这 样 浏览 器 就 知道 应 该 使 用 GZIP 格 式 处 理 获得 的 内 容 了 。 

在 使 用 GZIP 压 缩 ext-alljs 之 后 ， 在 FireFox 3.5 与 IE 7 下 均 测试 通过 ， 应 用 运行 正常 。 

除了 以 上 几 种 提升 加 载 效 率 的 方式 , 很 多 人 还 希望 对 EXT 进 行 裁 竟 ， 认 为 将 不 需要 的 功能 删 
除 掉 就 可 以 减 小 网 络 请 求 的 时 耗 。 但 是 我 们 并 不 推荐 使 用 这 种 方式 ， 因 为 EXT 中 的 继承 模型 比较 
复杂 ， 即 使 删除 一 些 组 件 也 不 能 明显 减 小 ext-alljs 的 大 小 ， 而 且 容 易 在 系统 后 期 进行 功能 扩充 或 
系统 升级 时 造成 一 些 无 可 预见 的 问题 ， 使 用 上 面 介 绍 的 GZJIP 压 缩 方 法 已 经 可 以 将 ext-all.js 压 缩 到 
167KB， 基 本 可 以 满足 大 部 分 系统 调 优 的 情况 。 

不 过 ， 如 果 还 是 有 读者 对 裁 前 ext-alljs 有 兴趣 的 话 ， 可 以 参考 EXT 官 方 提供 的 对 应 工具 ， 它 
可 以 根据 自己 所 需 的 组 件 生 成 自 定 义 的 JavaScript 文 件 . 不 过 目前 免费 版 的 工具 只 支持 2.3.0 和 1.1.1 
两 个 版 本 的 EXT， 网 址 为 http://www.extjs.com/products/extjs/build/。 


12.11 ”小结 


本 章 详 细 演 示 了 如 何 实 现 一 个 学 生 信息 管理 系统 ， 其 中 简要 介绍 了 如 何 使 用 Java 访 问 数据 
库 ， 以 及 一 些 SQL 语 名 的 使 用 方法 。 重 点 介绍 了 如 何 使 EXT 与 后 台 进 行 交 互 ， 实 现 对 数据 库 信息 
进行 分 页 显示 和 后 台 排 序 。 此 外 ， 还 讲解 了 如 何在 EXT 中 对 数据 库 信息 执行 添加 、 删 除 、 修 改 和 
查找 等 基本 操作 ， 并 提出 了 一 种 表格 与 表单 之 间 进 行 数据 交互 的 方式 。 

最 后 基于 完成 的 学 生 信息 管理 系统 介绍 了 提升 系统 加 载 效 率 的 一 些 常 用 方法 , 包括 使 用 工具 
将 JavaScript 文 件 进行 压缩 混淆 、 利 用 客户 端 缓存 和 使 用 GZIP 压 缩 。 
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复杂 实例 | 














本 章 内 容 
口 VIP 客 户 统计 系统 
口 Tracker 任 务 跟踪 系统 


本 章 将 演示 两 个 稍 显 复 杂 的 例子 : VIP 客户 统计 系统 和 Tracker 任 务 跟踪 系统 。 这 两 个 系统 虽 
然 规 模 不 大 ,但 是 包含 了 数据 分 类 查找 、 统 计 报表 等 功能 。 功 能 中 还 使 用 到 了 一 些 扩展 件 ， 希望 
可 以 起 到 抛砖引玉 的 作用 ， 让 大 家 在 前 面 的 基础 上 对 Ext JS 有 更 进一步 的 了 解 。 


13.1 VIP 客户 统计 系统 


这 是 一 个 简易 的 信息 统计 查询 工具 ， 它 甚至 没有 服务 器 端的 代码 ， 完 全 依靠 JavaScript 提 
供 各 种 数据 。 在 这 个 小 系统 中 我 们 可 以 分 类 查看 不 同 客户 的 信息 ， 以 及 由 这 些 信 息 汇 总 的 图 
形 报 表 。 

用 户 单 击 index.html 就 可 以 运行 VIP 客户 统计 系统 ， 首 页 效果 如 图 13-1 所 示 。 主 页 面 分 为 左右 
两 个 部 分 ， 左 侧 是 操作 选项 ， 可 以 根据 客户 的 类 型 或 者 是 否 过 期 ， 分 类 显示 对 应 的 客户 信息 以 及 
统计 报表 。 右 侧 显 示 客 户 的 详细 信息 ， 包 括 称呼 、 开 始 时 间 、 结 束 时 间 、 时 间 线 、 类 型 、 邮 箱 和 
QQ 号 人 码 。 

该 系统 中 最 主要 的 功能 就 是 如 何 根 据 用 户 类 型 ， 在 页 面 右 侧 的 表格 中 显示 对 应 的 用 户 信 息 。 
由 于 系统 没有 后 台 支 持 ， 所 有 的 数据 都 保存 在 内 存 中 ， 所 以 只 能 设法 过 滤 内 存 中 已 有 的 数据 ， 达 
到 分 类 显示 的 效果 。 

我 们 将 整个 项 目 按 功 能 划分 为 如 下 几 个 部 分 。 

D 名 js， 包含 可 复 用 的 功能 函数 。 

D pay.filterjs， 扩 展 MemoryProxy， 使 其 支持 分 页 和 数据 过 滤 功 能 。 

D pay.grid.js， 实 现 页 面 右 侧 的 表格 。 

D pay.tree.js， 实 现 页 面 左 侧 的 树 形 。 

D pay.js， 人 负责 整合 其 他 功能 ， 定 义 程序 入 口 。 

口 test.pay.data.js， 保 存 测试 数据 。 
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图 13-1 yi 要 疡 拔 计 系 纺 《用 户 列 表 ) 


项 目的 入 口 点 位 于 payjs。 页 面 加 载 完毕 后 ,会 调用 它 内 部 的 Ext .onReady (function() {})); 
函数 。 这 个 函数 会 创建 左 侧 的 树 形 和 右 侧 的 表格 ， 再 将 两 者 拼合 在 统一 的 Viewport 布 局 中 ， 最 后 
演 染 到 页 面 上 ， 形 成 大 家 看 到 的 效果 。 

对 应 的 功能 代码 如 代码 清单 13-1 所 示 。 


代码 清单 13-1 ”初始 化 糙 形 和 表格 ， 设 置 页 面 布局 
// 表格 


var grid = Pay.createGrid(}); 
// 树 形 


Var tree = Pay.createTree{); 


// 布局 开始 

Var tabPanel = new Ext .TabPanel(1{ 
region: ‘center', 
activeTab: 0, 
items; [grial 





}); 


Var Viewport = new Ext.Viewport!(t{ 

layout: 'border', 

items: [tabPanel, tree, { 
region: '‘'north', 
contentEl: 'north' 

},{ 
region: 'South' ， 
contentEl: 'South' 


}] 
})? 
// 布局 结束 
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Pay .createGrid{) 和 Pay .createTree() 分 别 定义 在 pay.grid.js 和 pay.tree.js 中 ,分 别 返 回 系 
统 的 左 侧 树 形 菜单 和 右 侧 表格 。 使 用 这 种 方式 , 我 们 可 以 把 整个 系统 切 分 成 不 同 的 功能 模块 ， 分 
散 到 多 个 JavaScript 进 行 开 发 。 

左 侧 树 形 采 用 的 加 载 方式 是 给 TreePanel 设 置 TreeLoader 为 空 的 参数 ， 让 它 去 加 载 root 中 
的 chilaren 属 性 。 这 样 可 以 直接 在 根 节点 中 使 用 JSON 格 式 的 数据 定义 树 形 节点 ， 就 不 必 使 用 烦 
琐 的 new Ext .tree.TreeNode 创 建 各 个 节点 的 实例 了 ， 如 代码 清单 13-2 所 示 。 


代码 清单 13-2 ” 左 侧 树 形 菜单 


Ext .nameSspPacetft "Pay") ; 
Pay.createTree = function() { 


Var tree = new Ext.tree.TreePanel({ 
region: 'wWest ' ， 
title: ' 搜 索 类 型 '， 
width: 150, 
slide: true, 
loadMask: true, 
loader: new Ext.tree.TreeLoader () 
py 
Var root = new Ext .tree.AsyncTreeNodet{t{ 
id: ‘'config'’; 
text: ' 选 项 '， 
children: 【{ 
id:  'level', 
text : ' 用 户 类 型 '， 
children: [{ 
id: 'allLevel', 
text: :全 部 '， 


leaf: true 


id: 'noSupport', 
text:' 盛 支持 '， 


leaf: true 


id: ‘month'’, 
text: ' 和 包月 '， 


leaf: true 


id: 'year', 
text: ' 包 年 '， 


leaf: true 


id: 'always', 
text:' 终 身 '， 
leaf; true 

}] 


id: 'outOfDate'’, 
text : ' 是 否 过 期 '， 
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children: [{ 


},4 


}] 


id: 


text: 


id: ‘'allOutOfDate', 
text: ' 全 部 '， 
leaf: true 
id: 'notOutOofDate', 
text: ' 未 过 期 '， 
leaf: true 
id: ‘alreadyOutofDate', 
text: ' 已 过 期 '， 
leaf: true 
‘report', 
' 统计 图 表 ' ， 

children: [{ 
id: 'levelReport'’, 
text: ' 按 用 户 类 型 '， 
leaf: true 
id: 'outOfDateReport'’, 
text: ' 按 是 否 过 期 '， 
leaf: true 


}] 


tree.setRootNode (root); 


return tree; 


$3 


payjs 中 为 左 侧 树 形 添加 了 事件 ， 这 样 在 单 击 左 侧 树 形 菜单 时 ， 右 侧 表 格 就 会 进行 联动 修改 ， 
如 果 点 击 了 用 户 类 型 和 用 户 是 否 过 期 ， 就 会 刷新 右 侧 表格 中 的 数据 ， 显 示 选 中 类 型 的 用 户 信息 。 
如 果 点 击 报表 ， 就 会 在 右 侧 TabPanel 中 添加 新 的 报表 页 面 。 


对 应 代码 如 代码 清单 13-3 所 示 。 


代码 清单 13-3 ”为 左 侧 树 形 菜单 设置 监听 事件 
/7 树 形 点 击 事件 


tree.on('click', 


function(node) { 


var id = node.id; 


if {id == 'allLevel' || id == 'allOutOfDate') { 
grid,.getSstore() .baseParams.filter = undefined; 
) else if (id == 'noSupport') { 
grid.getStore().baseParams .filter = {id: ‘level', 
} else if (id == 'month') { 
grid.getSstorel() .baseParams.filter = {id: 'level', 
} else it (id == 'year') { 
grid.getStore{() .baseParams.filter = {id: 'level', 
} else if (id == 'always') { 
grid.getStore{) .baseParams.filter = {id: 'level', 
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) else if (id == ‘notOQOutOfDate') { 
grid.getStore{) .baseParams.filter = {id: ‘notOutOfDate', value: notOutOfDate}:; 
} else if {id == 'alreadyOutOofDate') { 


grid,.getStore() .baseParams.filter = {id: ‘alreadyOutOfDate', value: isOutOfDate}):; 
} 
if {id == 'levelReport'}) { 
Var tabItem = tabPanel .getIitem('chart-level'); 
if (tabItem == null) { 
tabItem = tabPanel .add{new Ext.ux.IFrameComponent ({ 
id: 'chart-level', 
title: ' 用 户 等 级 统计 图 表 '， 
closable: true, 
Url: 'chart-level.html' 
者 用 | 


} 
tabPpanel.activate (tabItem); 
} else if (id == 'outOfDateReport') { 


var tabIltem = tabpPanel.getItem!{('chart-outofdate'}); 
if (tabItem == null) { 
tabIltem = tabPanel .add (new Ext.ux.IFrameComponent{1{ 
id: 'chart-outofdate', 
titIe: ' 是 否 过 期 统计 图 表 ' ， 
closable: true, 
Url: 'chart-outofdate.html' 
$7 
} 
tabpanel .activate (tabItem):; 
} else 1{ 
tabPanel.activatel(0); 
grid.getStore{) .reload{}; 
} 
] 3 
tree.getRootNode() .expand{true); 


所 有 VIP 用 户 信息 都 保存 在 test.pay.data.js 中 ， 用 户 信 息 的 数据 格式 如 代码 清单 13-4 所 示 。 
代码 清单 13-4 VIP 客户 数据 


Ext .namespace{"Pay"): 


Pay.data = { 
totalProperty: 21, 
oo ft 

EAs 


"name”": +“ 尖 叫 的 十 豆 ， ， 
“StartDatce'" :null, 
"endDate" :null, 


"level":3, 

"email":;"forgetdavifgmail .com", 

i Np i po he 

"descn" : "<hr> 感 谢 大 家 支持 我 们 的 《深入 浅 出 Ext JS》<br> 希 望 大 家 多 给 我 们 提出 宝贵 意见 <br> 谢 谢 。* 
i 

eb 汪 坟 

"name" : " 临 远 "， 
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"startDate" :null, 

"endDate" :null, 

"level'":3, 
"email":"xyz200038@gmail .com'", 
"qq":"416529445", 

"descn":"" 


人 

"name" c WT Wh Wi; 

"startDate" :null, 

"endDate" :null, 

"Jevel";3, 
"email":"kaiyuanlthh@gmail .com", 
"qq":"289298692"， 

escnr 六 


1 


首先 使 用 Ext .namespace() 为 项 目 定义 一 个 自己 的 命名 空间 , 之 后 就 可 以 在 Pay 这 个 命名 空 
间 下 进行 开发 ， 这 样 不 容易 与 其 他 模块 发 生 冲 突 。Ext .namespace () 不 会 对 已 经 存在 的 命名 空 


间 造 成 破坏 ， 可 以 放心 使 用 。 

每 个 客户 都 拥有 相同 的 设置 ， 包 括 id、name、startDate、endDate、level、email、qq 
和 descn (备注 )。 其 中 level 可 能 为 :0 (无 在 线 支持 )、1 (包月 )、2 ( 包 年 ) 和 3 ( 
它们 会 被 演 染 为 不 同样 式 的 文字 ， 最 终 显示 在 表格 中 。 
显示 包月 类 型 的 用 户 信息 。 


终身 ) 4 种 类 型 ， 


图 13-2 只 
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大 家 可 能 已 经 注意 到 表格 中 时 间 线 那 一 列 了 ， 这 一 列 使 用 不 同 颜色 来 提示 用 户 的 VIP 期 限 已 
经 过 去 了 多 长 时 间 。 它 与 “类 型 ” 列 一 样 ， 都 是 在 colummMode1 中 设置 对 应 的 renderer 泻 染 函 
数 来 实现 的 。 我 们 根据 当前 时 间 和 用 户 开始 时 间 与 结束 时 间 进 行 比较 ， 使 用 DIV 标 签 配 合 CSS 样 
式 模拟 了 一 个 简易 的 进度 条 。 

时 间 线 使 用 的 renderer 函 数 在 pay.grid.js 中 ， 如 代码 清单 13-5 所 示 。 


代码 清单 13-5 ”时 间 线 使 用 的 renderer 测 数 


{ 
id: 'timeline'， 
header: ' 时 间 线 '， 
renderer; function{({value, cellmeta, record) { 
Var level = record.get('level'); 
// 无 支持 
if (level == 0) 1 
return "<div style='background-color:#CCCCCC;width:100px; '>&nbsp;</div>"; 
) else if (level == 3) { 
return "<div style='background-color:1lightgreen;width:100px; '>&nbsp;</div>"; 
} else | 
Var startDate = record.get ('startDate'); 
var endDate = record.get('endDate'); 
var total = endDate.getTime() - startDate.getTime!(}); 
Var Current = new Date{() .getTime{) - startDate.getTime(); 
Var percent = current / total * 100; 
if (percent > 100) { 
percent = 100; 
} 


Var p = Ext .util.Format ,usMoney {percent) .substring{(1); 
return "<div style='background-color:green;color:white;width:100px;'>" + 
"<div style='background-color:red;width:" + percent + "px;'>" +p+ 
"$</Giv>" + 
ne 
} 
]， 
width: 80 
} 
我 们 使 用 了 rendaerer 绥 数 的 3 个 参数 。 
D 第 一 步 ， 从 record 中 取得 level 用 户 类 型 。 当 用 户 类 型 为 无 支持 时 ， 直 接 显 示 为 宽度 100 
的 红色 进度 条 ， 表 示 已 经 过 期 。 
口 第 二 步 ， 如 果 用 户 类 型 为 终身 ， 显 示 宽 度 100 的 浅 绿色 进度 条 ， 表 示 从 不 过 期 。 
D 第 三 步 , 如 果 用 户 类 型 为 其 他 , 即 包月 或 包 年 时 , 获得 record 中 的 startDate 和 endDate， 
再 根据 当前 时 间 计 算 百分比 , 使 用 Ext .util1.Format.usMoney() 函数 对 获得 的 百分比 进 
行 格式 化 ， 最 终 显示 一 条 绿色 背景 、 红 色 前 景 的 进度 条 。 
从 代码 清单 13-5 中 可 以 看 到 ， 我 们 只 使 用 了 renderer 中 最 基本 的 操作 ， 通 过 record 参 数 获 
得 该 行 数据 ， 并 进行 操作 输出 对 应 的 HTML 信 息 ， 大 家 在 此 基础 上 也 可 以 考虑 使 用 图 片 等 资源 绘 
制 出 更 加 漂亮 的 效果 。 
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从 pay.grid.js 中 可 以 看 到 ， 为 了 实现 行列 显示 、 泻 染 功 能 ， 我 们 使 用 了 大 量 的 代码 ， 而 实际 
上 实现 系统 关键 业务 的 代码 只 有 一 行 ， var proxy = new Ext.ux.FilterPagingMemoryProxy 
(Pay.data);。 创 建 的 Ext .ux,FilterPagingMemoryProxy 实 例 将 从 Pav.data 这 个 变量 中 提取 
数据 ， 并 将 封装 好 的 数据 提供 给 表格 使 用 。Ext .ux 是 EXT 为 用 户 扩 展 (User Extend) 专门 预 留 
的 命名 空间 ， 我 们 不 需要 使 用 Ext .namespace() 就 可 以 直接 使 用 。Ext .ux.FilterPaging- 
MemoryProxy 的 代码 可 以 在 pay.filterjs 中 找到 ， 代 码 中 最 主要 的 部 分 是 对 原始 数据 进行 过 滤 ， 即 
根据 给 定 的 条 件 对 数据 进行 过 滤 ， 只 保留 符合 条 件 的 数据 ， 如 代码 清单 13-6 所 示 。 


代码 清单 13-6 FilterPagdingMemoryProxvy 中 的 数据 过 滤 部 分 


if {params.filter !== undefined) { 
var filter = params.filter; 
var id = filter.id; 
var value = filter.value; 
if (id == :level'} { 
result,records = result .records.filter(function{record}t 
return String{record.datalid]) .match{value) ? true : false; 


}); 
} else it (ia == 'notOutOfDate') { 
result.records = result.records.filterl(function{record}t 
return notoutoftDate (record):; 
}); 
} else it (id == '‘'alreadyOutOofDate') ({ 
result.records = result.records.filter (function{record}t 
return isOutOfDate (record); 
}); 
} 
result .totalRecords = result.records.1length; 
} 


FilterPagingMemoryProxy 会 判断 params 中 是 否 存 在 filter 参 数 ， 如 果 存 在 就 要 对 数据 
进行 过 滤 。 如 果 ia 为 level， 则 需要 根据 用 户 类 型 进行 数据 过 滤 ， 这 时 调用 records 的 filter 1{) 
函数 和 string 的 match() 函数 判断 哪些 数据 符合 过 滤 条 件 。 如 果 id 为 notoutofDate 或 
alzreadyoutOofpate， 则 需要 根据 用 户 是 否 过 期 进行 数据 过 滤 ， 这 时 调用 fn.js 中 提供 的 
notOutofDate() 和 isoutofDate{) 两 个 函数 判断 用 户 是 否 已 经 过 期 ， 以 此 来 决定 显示 哪些 数据 。 

这 样 我 们 只 需要 设置 grid.getSstore() .baseParams .filter = {id: 'level', value: 
0}; 髓 调用 grid.getStore() .reload() ;函数 ， 就 可 以 让 表格 根据 我 们 设置 的 条 件 进行 过 滤 了 。 

除了 FilterPagingMemoryProxy 这 个 自 定 义 的 扩展 件 之 外 ， 我 们 还 在 表格 中 使 用 了 两 个 官 
方 提供 扩展 件 : Ext .ux.PageSizePlugin.js 和 RowExpander .js。 


Ext .ux.PagingSizePlugin 用 于 修改 表格 中 每 页 显示 的 最 大 信息 数 。 使 用 的 时 候 可 以 直接 
把 它 添加 到 bbar 中 ， 如 代码 清单 13-7 所 示 。 


代码 清单 13-7 “为 表格 添加 PagesizePlugin 插 件 
bbar: new Ext.PagingToolbar(t{ 


pageSize: pagesize, 
store: store, 
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displayInfo: true, 
plugins: [new Ext .ux,.PageSizePlugin()] 
}) 


RowExpander 会 在 表格 每 行 前 面 添 加 一 个 小 图 标 , 点击 这 个 图 标 可 以 将 这 一 行 展开 , 展开 的 
内 容 会 显示 在 这 一 行 的 下 方 , 我 们 可 以 使 用 Template 自 由 设置 展开 的 内 容 ， 如 代码 清单 13-8 所 示 。 


代码 清单 13-8 ”为 表格 添加 RowExpander 插 件 


Var expander = new Ext.grid.RowExpander{{ 
tpl : new Ext.Template! 
'<p>{descn}</p><br /><br />' 


Var cm = new Ext.grid.ColumnModell([ 
expander 
J 
Var grid = new Ext.grid.GridPanel ({ 
sm: new Ext.grid.RowSelectionModel{{ 
selectRow: functionl(index, keepExisting, preventViewNotify) { 
expander .toggleRow (index); 


}), 
plugins: expander 
3 


PageSizePlugin 和 RowExpander 的 显示 效果 如 图 13-3 所 示 。 
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系统 的 最 后 一 项 功能 是 统计 报表 。 我 们 可 以 按照 用 户 类 型 和 是 否 过 期 生成 两 种 统计 报表 , 报 
表 图 形 并 不 是 使 用 EXT 实 现 的 ， 不 过 在 显示 报表 页 面 的 时 候 使 用 了 iframe。 这 样 做 的 好 处 是 不 
用 将 所 有 代码 都 加 载 到 首页 中 ， 虽 然 RIA 宣 扬 one page one application， 但 是 使 用 ;iframe 可 以 在 -- 
定 程度 上 避免 一 次 加 载 过 多 的 资源 文件 ， 在 实际 中 依然 拥有 适用 的 场景 。 

为 了 方便 起 见 ， 我 们 使 用 了 EXT 官 方 提供 的 Ext .ux.IFrameComponent .js 来 实现 在 页 面 中 
插入 iframe 的 功能 ， 对 应 代码 如 代码 清单 13-9 所 示 。 


代码 清单 13-9 ”使 用 ITFramecomponent 向 页 面 中 插入 iframe 


cabItem = 上 tabpPanel .ada(new Ext .ux.IFrameComponent ({ 
id: 'chart-outofdate'’, 
title: ' 是 否 过 期 统计 图 表 ' ， 
closable: true, 
url: 'chart-outofdate.html' 
下 区 


使 用 iframe 的 统计 报表 ， 显 示 效 果 如 图 13-4 所 示 。 
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图 13-4 证 条 (用 户 等 级 统计 图 表 ) 


13.2 Tracker 任务 跟踪 系统 


Tracker 是 一 个 简易 的 任务 跟踪 系统 ， 它 使 用 了 最 基本 的 SSH (Struts.Spring.Hibemate〉 开 发 
框架 ， 通 过 搓 入 式 数 据 库 Hsqldb 保 存 数据 ， 依 靠 Maven 2 管理 项 目 流程 。 这 全 然 已 经 是 一 个 小 而 
全 的 企业 系统 了 。 

EXT 在 系统 中 负责 前 台 展 示 的 部 分 , 后 台 通 过 Struts 2 结合 json-lib 与 前 台 的 EXT 进 行 交互 。 在 
开发 过 程 中 ， 我 们 封装 了 JsonGrid 和 JsonTree 这 些 基本 组 件 ， 很 大 程度 上 减少 了 编码 的 数量 ， 
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提高 的 开发 效率 。 
系统 界面 如 图 13-5 所 示 。 
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图 13-5 Tracker 任务 跟踪 系统 


系统 左 侧 是 以 JsonTree 为 基础 生成 的 树 形 菜单 ， 显 示 了 所 有 工程 的 信息 ， 我 们 可 以 直接 在 左 
侧面 板 部 分 进行 添加 、 修 改 、 删 除 等 操作 。 
进行 详细 配置 后 ， 右 键 功能 菜单 效果 如 图 13-6 所 示 。 
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图 13-6 ”维护 左 侧 树 形 菜单 
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创建 左 侧 树 形 菜 单 的 代码 如 代码 清单 13-10 所 示 。 
代码 清单 13-10 ”创建 左 侧 树 形 菜单 


Var metaData = [ 


{name: 'id', fieldLabel: *ID", allowBlank: true}, 
{name: 'name', fieldLabel: "项 目 名 称 "，allowBlank: false}， 
{name: 'founder',，fieldLabel: “创建 者 "， allowBlank: false}, 
{name: 'summary'，fieldLabel: "项 目 撕 述 *"，allowBlank: true, xtype: 


]¥ 

Tracker.tree = new TrackerTreel(t 
formConfig: metaData, 
rootName: ' 所 有 工程 '， 
dlgWidth: 450, 
dlgHeight: 250, 
urlGetAllTree: *,/trackerPproject!getAllTree.do", 
urlInsertTree: "./trackerproject!insertTree.do", 
urlRemoveTree: "./trackerProjecttiremoveTree.do", 
UrlSortTree: "./trackerProject!sortTree.do", 
urlbLoadData: "./trackerproject!loadData.do", 
urlUpdateTree: ",/trackerProject updateTree.do', 
region: 'west', 
title: ' 分 类 '， 
width: 169, 
minSize: 169， 
split: true 

}); 


'htmleditor'} 


TrackerTree 直 接 继承 自 JsonTree， 它 在 继承 了 JsonTree 所 有 功能 的 基础 上 ， 对 内 部 功能 
进行 了 一 些 自 定义 修改 。 我 们 来 看 一 下 它 所 使 用 的 初始 化 参数 ， 以 便 对 它 有 更 进一步 的 了 解 。 
DO formconfig， 新 建 或 更 新 时 生成 表单 窗口 的 配置 ， 可 以 使 用 xtype 指 定编 辑 器 的 类 型 。 


DrzrootName， 树 形 的 根 节点 。 


o dlgWwidth 和 dlgHeigth 用 来 设置 生成 表单 窗口 的 宽 和 高 。 


D urlGetAllTree， 从 后 台 获 取 树 形 数据 的 地 址 。 
D urlInsertTree， 添 加 节点 时 请 求 的 后 台地 址 。 
口 urlRemoveTree， 删 除 节 点 时 请 求 的 后 台地 址 。 
口 urlsortTree， 对 节点 进行 排序 时 请 求 的 后 台地 址 。 


这 样 我 们 不 需要 再 另外 写 其 他 代码 ， 只 使 用 new 关 键 字 创建 了 一 个 TrackerTree 的 实例 ， 就 
直接 拥有 了 CRUD〔 增 删改 查 ) 这 些 基本 操作 。 如 果 项 目 中 有 多 个 操作 相似 的 树 形 需 要 创建 ， 那 


么 这 种 继承 超 类 的 方式 无 疑 是 一 种 省 时 省 力 的 好 方法 。 


如 果 需 要 修改 JsonTree 中 的 功能 ， 可 以 像 TrackerTree 一 样 ， 使 用 Ext .extenad() 继承 
JsonTree 生 成 一 个 子 类 ， 在 子 类 中 进行 扩展 或 修改 超 类 中 的 功能 。 如 代码 清单 13-11 所 示 。 


代码 清单 13-11 使 用 Ext .extena() 继承 Jasonfree 生 成 子 类 


TrackerTree = Ext.extend (Ext.1lingo.JsonTree, { 


1// 生成 工具 条 
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builidToolbar: function()} : 
var toolbar = [{ 
text 添加 新 项 目 ' ， 
iconCls : 'add', 
tooltip : ' 添 加 选中 节点 的 下 级 分 类 '， 
handler : this.createNewProject.createDelegatel(this) 
A 
text :刷新 ' ， 
iconCls : 'refresh', 
tooltip : ' 刷 新 所 有 节点 '， 
handler : this.refresh.createDelegate!(this) 


Es 


return toolbar:; 


]， 


// 生成 右键 菜单 


buildContextMenu : 


function() 1{ 
this.on(' contextmenu ' ， 
this.contextMenu 


this.prepareContext)},; 
= new Ext.menu.Menut{t{ 


ia DAIC 七 区 4 
items : [({ 
id : 'CcreateChild', 
handler : this.createNewProject.createDelegate{this), 
iconCls : 'add', 
text :添加 新 项 目 ， 
1 
ia : ‘remove', 
handler : this.removeNode.createDelegate{this), 
iconCls :; ‘delete', 
text :删除 节点 ， 
dt 
ia : "refresh'., 
handler :; this.refresh.createDelegate(this), 
iconCls ‘refresh'’, 
text ' 刷 新 ' 
i 
id “eontio.:; 
iconCis ss config*; 
handler : this.configInfo.createDelegate(this), 
text ' 详 细 配 置 ' 
) ] 
ER 
yy 
// 生成 新 项 目 
createNewProject : function() 1 


this.createNode (this.getRootNode{()); 


} 
$3 


TrackerTree 修 改 了 超 类 中 的 两 个 图 数 buildmroolbar() 和 builacontextMenu ()， 另 外 增 





加 了 一 个 createNewProject() 函数 ， 以 这 种 方式 将 JsonTree 中 默认 的 工具 条 和 右键 菜单 修改 
成 了 项 目 项 目 中 左 侧 树 形 菜单 中 的 样式 。 
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系统 右 侧 以 JsonGrid 为 基础 生成 功能 表格 ， 还 支持 对 某 一 列 数据 进行 相关 搜索 ， 默 认 拥 有 
CRUD 等 基本 功能 ， 进 行 新 增 和 修改 时 会 弹出 对 应 的 表单 窗口 ， 供 用 户 填写 任务 信息 ， 在 进行 删 
除 操作 时 可 以 选择 单条 或 多 条 记录 。 这 些 操作 都 可 以 通过 简单 的 配置 直接 获取 。 

与 TrackerTree 的 创建 方式 类 似 ，TrackerGrid 的 创建 代码 如 代码 清单 13-12 所 示 。 


代码 清单 13-12 ”创建 TrackerGrid 


Var metaData = [ 
{name: 'id', fieldLabel: "ID"， allowBlank: true, readOnly: true}, 
{name: 'projectId', fieldLabel: "项 目 id",， allowBlank: false, mapping: 
'trackerProject.id', xtype: ‘hidden', hideGrid: true}, 
{name: 'narme'， fieldLabel: "任务 名 称 "，allowBlank: false}， 
{name: 'priority'’, fieldLabel: "优先 级 "， allowBlank: false, xtype: 'priority’, 
renderer: this.renderPpriority}, 
{name: ‘severity', fieldLabel:" 严 重度"， allowBlank: false, xtype: 'severity', 
renderer: this.renderSeverity}, 
{name: 'status', fieldLabel: "状态 "， allowBlank: true, xtype: ‘status', 
renderer: this,renderStatus}, 
{name: 'assignTo'， fieldLabel: "负责 人 ，"， allowBlank: falsel， 
{name: 'submitBy', fieldLabel: “提交 者 "， allowBlank: false}, 
{name: 'addDate'， fieldLabel:; "提交 时 间 ", allowBlank: false, xtype: 'datefield'), 
{name: 'updateDate'，fieldLabel: "修改 时 间 "，allowBlank: false, xtype: 'datefield']， 
{name: 'content ' ， fieldLabel: "内 容 "， allowBlank: true, xtype: 'htmleditor’, 
renderer: this.renderContent}, 
{name: ‘file', fieldLabel: "附件 "， allowBlank: truel 


la 
Tracker.grid = new TrackerGridl({ 


formConfig : metaData, 
dlgwidth : 450, 
dlgHeight : 250, 


dialogContent : "grid content*, 
urlPagedQuery : "./trackerIssue!pagedQuery.do", 


urlSave : "./trackerIissue!save.do", 
urlLoadData : "./trackerIssue!loadData .do", 
urlRemove : "./trackerIssue!remove.do", 
region: ‘center', 

title: + 列表 ， 


局 时 


TrackerGrid 直 接 继承 自 JsonGrid。 我 们 来 看 一 下 它 所 使 用 的 初始 化 参数 ， 以 便 对 它 有 更 
进一步 的 了 解 。 

D formConfig， 表 格 中 的 formconfig 有 两 种 作用 ， 它 不 仅 可 以 设置 新 建 更 新 时 的 表单 格 
式 ， 还 可 以 设置 表格 中 的 columnModel 样 式 ， 因 此 还 可 以 为 它 设 置 renderer 属 性 对 某 一 
列 数据 进行 特殊 处 理 。 
GlgWidth 和 GlgHeigth 用 来 设置 生成 表单 窗口 的 宽 和 高 。 
urlPagedQuery， 分 页 显示 时 请 求 的 后 台地 址 。 
urlsave， 保 存 数据 时 请 求 的 后 台地 址 。 
urlLoadData， 请 求 一 条 数据 时 请 求 的 后 台地 址 。 
urlRemove， 人 删除 记录 时 请 求 的 后 台地 址 。 


DD B09 口 
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在 此 ， 我 们 需要 使 用 同一 个 formconfig 参 数 为 表格 的 columnModel 和 弹出 窗口 的 表单 进行 
设置 ， 因 此 formconfig 中 的 数据 也 更 复杂 一 些 。 由 于 表格 中 用 到 了 一 些 复杂 的 输入 控件 ， 比 如 
“优先 级 “严重 程度 ”和 “状态 ”都 需要 使 用 特定 的 ComboBox。 为 了 避免 在 formconfig 中 加 
入 过 于 复杂 的 代码 ， 我 们 选择 在 trackerjs 中 提前 创建 这 三 者 的 自 定 义 类 型 ， 并 为 其 注册 对 应 的 
xtype， 这样 在 表格 里 就 可 以 直接 使 用 xtype 进 行 引 用 了 。 

例如 ， 定 义 “ 优 先 级 ”的 代码 如 代码 清单 13-13 所 示 。 


代码 清单 13-13 ”预先 定义 “优先 级 ” 子 类 并 注册 xtype 


PriorityCombo = Ext .extend(Ext.form.ComboBox, 
name: 'priority _ name', 
hiddenName: 'priority', 
readOnly: true, 
fieldLabel: ' 优 先 级 '， 
valueField: ‘'id', 
displayField: 'name', 
typeAhead: true, 
mode: 'remote', 
triggerAction: 'all', 
emptyText : ' 请 选择 '， 
selectOnFocus: true, 
allowBlank: false, 
store: new Ext.data.Storel(tl 
proxy: new Ext.data.MemoryProxy!{([ 


[0 ; 
[1,' 中 已 ， 
[2, ' 高 '] 


reader: new Ext.data.ArrayReader!{t{ 
},['id','name']) 


eet PriorityCombo); 

为 了 实现 将 任务 绑 定 到 对 应 项 目 中 , 我 们 对 TrackerGria 进 行 了 一 些 修改 , 使 用 户 在 新 建 或 
修改 任务 时 自动 获得 左 侧 选 中 的 项 目 ， 并 在 保存 任务 时 将 projectId 作 为 参数 传递 给 后 台 处 理 。 

TrackerGrid 也 使 用 了 Ext .extend() 函数 对 JsonGrid 进 行 了 扩展 ， 实现 代码 如 代码 清单 
13-14 所 示 。 


代码 清单 13-14 ”使 用 Ext .extend() 扩 展 JsonGrid 


TrackerGrid = Ext.extend (Ext.lingo.JsonGrid, { 
viewConfig: ({ 
forceFit: true 





好 


7/ 弹出 添加 对 话 框 ， 添 加 -条 新 记录 
add : function() { 
TrackerGrid.superclass.add.call (this); 
this.formPanel .getForm() .findrField("projectId") .setValue(this.projectId) ; 
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}， 


// 弹出 修改 对 话 框 
edit : function() { 
TrackerGrid.superclass.edit,call(this); 


this.formPanel .getForm{) .findField("projectId") .setValue (this.projectId); 
}, 


// 设置 baseParams 
setBaseParams : function() { 
// 读 取 数据 
this.store.on{'beforeload', function() { 
this.store.basePparams = { 
filterVvalue: this.filter.getvalue(), 
filterTxt: this.filterTxt, 
ProjectId: this.projectIqd 
js 
}.createDelegate(this)); 
} 
3 


代码 中 主要 修改 了 add() 、edit () 和 setBaseParams () 隙 数 ， 将 projectIG 绑 定 到 向 后 台 
提交 的 参数 中 ， 这 样 后 台 代 码 可 以 通过 projectId 判 断 当前 任务 究竟 处 于 哪 一 个 工程 。 
图 13-7 是 在 表格 中 新 增 一 条 任务 的 界面 效果 。 
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图 13-7 新 增 一 条 任务 


为 了 实现 快速 开发 我们 不 仅仅 在 前 台 对 EXT 进 行 了 封装 ， 还 在 后 台 对 Struts 2 以 及 Hibemate 
部 分 进行 了 对 应 的 封装 。 大 多 数 时候 只 需要 继承 超 类 ， 就 可 以 获得 表格 或 树 形 的 CRUD 操 作 。 如 
此 一 来 ， 需 要 编写 的 代码 更 简洁 ， 结 构 更 清晰 ， 开 发 效率 也 更 快 了 。 
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13.3 小 结 


本 章 详 细 介 绍 了 两 个 有 特色 的 实例 。 

VIP 客户 统计 系统 完全 基于 前 台 JavaScript 开 发 ， 它 演示 了 如 何 更 灵活 地 使 用 rendaerer () 
函数 演 染 出 更 漂亮 的 行列 效果 ， 同 时 扩展 了 MemoryProxy 使 其 实现 前 台 分 页 、 排 序 、 过 滤 等 
高 级 功能 。 

Tracker 任 务 跟踪 系统 更 倾向 于 演示 如 何 将 开发 中 的 基本 功能 封装 为 超 类 , 这 样 在 开发 类 似 功 
能 的 时 候 只 需要 继承 对 应 的 超 类 就 可 以 继承 大 多 数 通 常 都 需要 实现 的 功能 。 这 样 不 止 减少 了 代 
码 ， 也 使 程序 的 结构 更 加 清晰 ， 极 大 地 提高 了 开发 效率 。 
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EXT 3.x 中 的 新 特性 





本 章 内 容 

口 介绍 Ext Core 

口 介绍 Ext Direct 

介绍 EXT 3.0 中 新 增 的 组 件 
介绍 EXT 3.0 中 支持 的 Flash 报 表 
EXT 3.1 带 来 的 新 特性 

EXT 3.2 带 来 的 新 特性 


2009 年 7 月 6 日 ， 发 布 了 EXT 3.0 正 式 版 ， 我 们 终于 迎 来 了 2.x 到 3.x 这 一 重大 版 本 升级 。 虽 然 之 
前 广 为 宣 传 的 Web Designer 还 未 正式 亮相 ， 但 3.0 也 为 我 们 提供 了 多 项 重要 的 功能 改进 。EXT 团 队 
不 仅 为 我 们 提供 了 更 多 、 更 绚丽 的 控件 , 在 基础 功能 和 与 后 台 服 务 的 数据 传输 方面 也 下 了 不 小 的 
功夫 。 下 面 我 们 来 逐一 介绍 EXT 3.x 中 新 增加 的 特性 。 


14.1 介绍 Ext Core 


EXT3.0 大 大 增强 了 自身 的 模块 化 管理 机 制 ， 正 因 如 此 ，EXT 官 方 已 经 将 包含 核心 功能 的 Ext 
Core 抽 离 出 来 ， 作 为 单独 的 发 布 包 提供 给 我 们 下 载 。 在 Ext Core 中 包含 的 都 是 Web 开 发 所 需 的 基 
本 操作 ， 其 中 并 不 包括 诸如 表格 、 菜 单 等 组 件 ， 我 们 可 以 将 Ext Core 看 做 是 与 prototypejs、jquery 
或 是 Mootools 同 一 级 别 的 ， 用 于 底层 JavaScript 开 发 的 核心 工具 库 。Ext Core 告 诉 我 们 EXT 并 非 只 
能 用 于 企业 开发 ， 它 其 中 蕴含 的 基础 功能 完全 可 以 适用 于 网 络 开发 。 

Ext Core 中 包含 的 功能 有 : DOM 遍 有 历 与 操作 、Ajax、 事 件 处 理 、 动 画 、 模 板 和 面向 对 象 机 制 。 
从 源 代 码 结构 可 以 看 到 整个 Ext Core 分 为 4 大 部 分 。 


14.1.1 adapter 
在 adapter 目 录 包 含 7 个 文件 。 
Dext-base-ajax.js， 实 现 了 Ext.1ib.aAjax 类 的 功能 ， 这 是 Ext 中 最 基本 的 Ajax 底层 实现 。 
口 ext-base-anim.js， 实 现 了 Ext .1ib 中 基本 动画 功能 。 
口 ext-base-anim-extrajs， 对 Ext .1ib 中 的 动画 功能 进行 扩展 ， 实 现 了 平滑 变换 与 颜色 变换 
的 功能 。 
口 ext-base-begin.js， 只 包含 Ext .fly 的 定义 。 


回 : :日 日 加 
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口 ext-base-dom.js， 实 现 了 对 DOM 的 大 小 位 置 等 属性 的 操作 。 

口 ext-base-end.js， 对 下 进行 特别 处 理 ， 在 触发 页 面 unload 事 件 时 取消 aocument 对 和 象 上 定义 
的 事件 绑 定 。 

口 ext-base-event,js， 对 浏览 器 中 原生 事件 进行 了 封装 ， 返 回 统一 的 处 理 类 。 


14.1.2 core 


在 core 目 录 包 含 14 个 文件 。 

CompositeElementLitejs， 即 轻 量 级 的 复合 元 素 。 

DomHelper.js， 提 供 对 DOM 的 各 种 辅助 操作 功能 。 

DomQuery.js， 提 供 了 对 DOM 的 各 种 查询 操作 .。 

Element.fx.js， 提 供 了 与 Element 对 象 相关 的 动画 效果 。 

Element.insertion.js， 提 供 了 对 元 素 的 插入 替换 等 功能 。 

Elementjs， 定 义 了 应 用 最 广 的 Element 类 ， 几 乎 所 有 的 操作 都 可 以 通过 封装 的 Element 

口 Element.position.js， 提 供 了 对 Element 位 置 操作 的 功能 。 

D Element.scrolljs， 提 供 了 对 Element 滚 动 的 支持 。 

DD Element.style.js， 提 供 了 Element 样 式 的 支持 。 

D Element.traversal.js, 提供 了 对 Element 的 遍历 操作 ,注入 findParent () ,findParentNode 1{) 

口 EventManager.js， 定 义 了 事件 管理 器 ， 支 持 对 aocReady 等 事件 的 特殊 处 理 。 

Q Extjs， 初 始 化 了 Ext 这 个 定义 命名 空间 ， 并 提供 了 一 系列 判断 当前 使 用 的 浏览 器 类 别 的 
静态 属性 。 

口 Fxjs， 实 现 了 所 有 动画 效果 ， 所 有 动画 效果 可 以 直接 绑 定 在 Element 中 使 用 。 

口 Template.js， 提 供 了 对 模板 的 支持 。 


14.1.3 data 
在 data 目 录 包 含 1 个 文件 。 
D Connectionjs， 在 Ext.lib.Ajax 这 个 底层 的 基础 之 上 实现 了 统一 的 Ext .Ajax 静态 类 ， 其 中 支 
持 更 易 用 的 Ajax 操作 。 


14.1.4 util 


在 util 目 录 包 含 4 个 文件 。 

D DelayedTask.js， 提 供 简单 的 定时 任务 操作 。 

D JSONjs， 提 供 对 JSON 操 作 的 支持 ， 其 中 的 方法 可 以 直接 通过 Ext .encode() 和 Ext. 
daecode () 调用 。 

口 Observable.js， 实 现 了 观察 者 设计 模式 ， 所 有 支持 自 定义 事件 的 组 件 都 可 以 直接 继承 这 个 


GooOoo 
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类 ， 从 而 获得 所 有 事件 功能 。 
口 TaskMegr.js, 定义 了 事件 管理 器 ， 可 以 对 pelayTask 进 行 统一 管理 。 


14.1.5 ”扩展 实例 


Ext Core 的 官方 发 布 包 还 提供 了 几 个 基于 Ext Core 的 扩展 组 件 ， 因 为 Ext Core 中 只 包含 了 底层 
核心 库 ， 并 没有 包含 任何 功能 复杂 的 组 件 。 下 面 就 来 看 一 下 基于 这 个 简易 版 的 Ext Core 核 心 库 可 
以 实现 何 种 效果 。 

假若 我 们 希望 在 页 面 上 实现 类 似 TabPanel1 的 功能 , 基于 Ext Core 只 需要 编写 很 少 几 行 代码 就 
可 以 实现 ， 如 下 所 示 : 

Ext .onReady (function!()f{ 

Ext .Select(' .tab-buttons-panel') .on('click'’', function{e, t) 1{ 
Ext .get (t) ,radioClass{('tab-show’'):; 
Ext .get('content' + t.id.slice(-1)}).radioClass{('tab-content-show'); 


}, null, {delegate: ‘'1i')}); 
网 训 


这 段 代码 的 功能 是 在 页 面 加 载 完 成 之 后 ， 使 用 Ext .select () 监听 CSS 的 class 值 为 tab- 
buttons-panel 的 元 素 ， 并 监听 元 素 中 由 1i 元 素 产 生 的 click 事 件 ， 在 用 户 使 用 鼠标 点 击 这 些 元 
素 时 就 会 触发 相应 的 函数 进行 处 理 。 

当 用 户 使 用 鼠标 点 击 这 些 元 素 时 ， 首 先 使 用 Ext.fly() 获得 Element ， 然 后 调用 
radioclass()， 这 样 就 会 为 当前 的 元 素 批量 实现 切换 CSS 样 式 的 效果 。 它 可 以 保证 一 批 元 素 中 
仅 有 当前 被 点 击 的 元 素 会 被 设置 上 tab-show 这 个 样式 ， 这 样 就 可 以 看 到 当前 元 素 也 就 是 标签 头 部 
是 处 于 被 选中 的 状态 。 

然后 使 用 Ext .get () 函数 ,通过 点 击 的 元 素 , 也 就 是 标签 头 部 的 ia 获得 对 应 标签 内 容 的 元 素 ， 
也 通过 radioclass () 函数 批量 切换 CSS 样 式 ， 这 样 操作 的 结果 是 被 点 击 标签 头 部 的 内 容 部 分 会 
显示 出 来 。 

为 便于 大 家 理解 ， 下 面 给 出 了 对 应 的 HTML 代 码 内 容 : 


<!DOCTYPE HIML PUBLIC *-//W3C//DTID HTML 4.01//EN" "http://www.w3.org/TR/htmld4/strict .dtd"> 
<html lang="en"> 
<head> 

<title>Ext Tabs Example</title> 


<link href=".,./examples.css" rel="stylesheet" /> 
<link href="tabs.css" rel="stylesheet" /> 


<SCript src="../../ext-core-debug.js"></script> 
<script src="tabs.js"></script> 
</head> 
<body> 
<div class="tab_container"> 
<div class="tab-buttons-panel"> 
<ul> 
<li id="tabl" class="tab-show"> 
<span>Nature</span> 
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YL 
<l1i id="tab2"> 
<span>Vehicles</span> 
</1i> 
<1 id="tab3"> 
<span>Animals</span> 
< ii 
</ul> 
</div> 
<div id="contentl" class="tab-content tab-content-show"> 
<div class="tab-content-panel-border"> 
<div class="tab-content-panel"> 
<b>Things in Nature</b> 


<Ul> 
<li>Plants</l1i> 
<li>Qcean</li> 
<li>Trees</l1i> 
<li>Skies</1i> 
<li>Mountains</1i> 

</ul> 

</div> 
</div> 
</div> 


<div id="content2" class="tab-content"> 
<div class="tab-content-panel-border"> 
<div class="tab-content-panel"> 
<b>Types of Vehicles</b> 


<ul> 
<li>Cars</l1i> 
<li>Boats</l1i> 
<l1i>Trucks</1i> 
<l1i>Bikes</l11> 

ES 

</Aiv> 
</div> 
</Adiv> 


<div id="content3" class="tab-content"> 
<div class="tab-content -panel-border"> 
<div class="tab-content-panel"> 
<b>Types of Animals</b> 


<ul> 
<li>Tigers</1i> 
<li>Elephants</1i> 
<li>Fish</1i> 
<li>Birds</l1i> 
</ul> 
</div> 
</div> 
</div> 
</body> 
</html> 


从 以 上 代码 中 可 以 看 出 ， 表 示 标 签 面板 头 部 的 div 的 class 值 为 Lab-buttons-panel， 它 下 
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面 有 3 个 1i 元 素 ， 每 个 11 元 素 将 显示 为 一 个 标签 头 部 ， 每 个 标签 头 部 都 与 下 面部 分 的 div 一 一 对 
应 ， 可 以 看 到 它们 之 间 ia 的 对 应 关系 ， 这 些 qiv 包 含 的 就 是 标签 内 容 。 

点 击 任意 一 个 1i 元 素 时 ， 就 会 触发 click 事 件 ， 事 件 监听 函数 会 根据 点 击 的 标签 头 部 批量 切 
换 CSS 样 式 ， 从 而 达到 显示 不 同 标签 内 容 的 效果 ， 最 终 显示 效果 如 图 14-1 所 示 。 

也 许 有 人 会 嫌 这 里 的 显示 效果 太 简 陋 了 ， 比 不 上 之 前 见 过 的 EXT 所 展示 出 来 的 绚丽 效果 ， 这 
是 因为 Ext Core 并 没有 包含 任何 与 页 面 显示 相关 联 的 内 容 ， 没 有 提供 大 量 的 图 片 背景 ， 也 没有 提 
供 丰 富 的 样式 设置 。 从 Web 开 发 的 角度 来 讲 ， 这 解放 了 前 端 开发 人 员 。 因 为 之 前 EXT 提 供 的 默认 
主题 过 于 复杂 ， 所 以 有 人 曾 提出 了 美工 无 用 武之 地 的 窘境 。 现 在 Ext Core 像 其 他 底层 JavaScript 开 
发 库 一样 ， 只 关注 基本 操作 ， 将 布局 和 显示 样式 设置 的 门槛 降低 ， 我 们 就 可 以 使 用 它 结合 自 定义 
的 样式 设计 实现 自己 所 需 的 功能 了 。 

下 面 再 来 看 一 个 基于 Ext Core 实 现 的 lightbox 效 果 ， 如 图 14-2 所 示 。 


Nature Vehides Anifrnmals 


Things tn Nature 





图 14-1 基于 Ext Core 实 现 TabPanel 图 14-2 ”基于 Ext Core 开 发 的 lightbox 组 件 


官方 发 布 包 中 还 包括 了 更 多 基于 Ext Core 扩 展 的 组 件 ， 可 以 为 我 们 提供 更 多 可 以 直接 利用 的 
功能 。 实 例 以 及 代码 可 以 在 发 布 包 的 example 目 录 下 找到 。 


14.2 介绍 Ext Direct 

Ext Direct 是 一 套 EXT 3.0 中 出 现 的 数据 交换 API， 它 的 作用 是 屏蔽 服务 器 后 端 平台 的 差异 ， 
使 用 同一 套 API 实 现 前 台 应 用 与 后 台 服 务 之 间 的 数据 交互 。 

对 Java 用 户 来 说 ，Ext Direct 似 乎 就 是 男 一 个 DWR， 实 际 上 两 者 的 工作 原理 也 是 基本 相同 ， 
都 是 根据 后 台 对 应 的 功能 方法 生成 前 台中 对 应 的 JavaScript 函 数 。 在 调用 JavaScript 函 数 时 ， 会 和 E 
动 发 起 Ajax 请 求 调 用 后 台 提供 的 功能 ， 并 自动 处 理 响应 的 数据 。 只 是 DWR 仅 为 Java 量 身 打 造 , 无 


法 使 用 在 其 他 平台 上 ， 而 Ext Direct 为 各 个 主流 平台 都 提供 了 实现 ， 而 前 台 生 成 的 JavaSeript 脚 本 
也 是 完全 基于 EXT 中 的 实现 ， 更 易于 使 用 在 基于 EXT 的 项 目 中 。 


14.2.1 Ext Direct 
使 用 Ext Direct 的 第 一 步 是 为 后 台 暴 露 的 远程 方法 声明 API， 一 个 实际 的 apijs 代 码 内 容 如 下 : 
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Ext .app.REMOTING _API = { 
type: 'remoting', 
Url: ‘jsp/router.jsp', 


actions: { 


Testaction: [{ 


393 


name: ‘doEcho', 
len: 1 

Pz 条 
name: ‘multiply', 
len: 1 

Ex 
name: 'getTree', 
len: 1 

}]; 

Profile: [t 
name: 'getBasicInfo', 
len: 1 

Ti 元 
name: 'SetPhoneInfo' ， 
len:; 1 

Ki 六 
name: “getLocationInfo' ， 
len: 1 


}) 
} 
} 


上 面 代码 中 定义 了 类 型 为 远程 调用 (remoting) 的 APL， 对 应 的 后 台 url 是 jsp/routerjsp， 这 
样 在 它 内 部 所 定义 的 actions 调 用 时 都 会 向 这 里 定义 的 ur1 (jsp/router.jsp〉 发 送 请 求 。 

代码 的 actions 属 性 中 定义 了 所 暴露 的 类 名 和 类 下 面包 含 的 方法 定义 ， 这 里 定义 了 两 个 类 
Testaction 和 Profile 。 其 中 mestaction 下 包含 3 个 方法 aogcho () 、multiply() 和 
getTree()， 这 3 个 方法 在 调用 时 都 需要 传 入 一 个 参数 。 下 面 定 义 的 Profile 与 TestAction 基 本 
类 似 ， 它 也 包含 3 个 方法 getBasicInfo1()、 getPhoneInfo() 和 getLocationInfo()， 这 3 个 方 
法 在 调用 时 也 都 需要 传递 一 个 参数 。 

在 使 用 Ext Direct 之 前 ， 我 们 就 需要 把 这 个 api .js 导入 到 页 面 中 ; 

<script type="text/javascript" src="api.js"></script> 


之 后 还 要 在 JavaScript 中 将 api .js 中 定义 的 Ext .app. REMOTING_API 设 置 到 Ext Direct 中 ，Ext 
Direct 会 根据 其 中 的 配置 ， 自 动 生成 对 应 的 对 象 。 设 置 代码 如 下 所 示 : 


Ext .Direct .addPprovidert{ 
Ext .app .REMOTING_API， 
{ 
type: 'polling', 
Lrl: ‘jsp/poll.jsp' 
} 
}3 


实际 上 ， 我 们 可 以 同时 配置 多 个 Ext Direct 的 远程 方法 ， 上 面 的 代码 中 不 仅 设置 了 api .js 中 
配置 的 Ext.app.REMOTING_API， 还 附加 了 额外 的 一 段 类 型 为 polling 的 配置 。 有 关 Ext Direct 
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支持 的 调用 类 型 将 在 后 面 详细 介绍 。 
在 完成 了 Ext Direct 的 设置 之 后 ， 就 可 以 在 代码 中 直接 调用 这 些 功 能 函数 了 。 如 果 之 前 使 用 
过 DWR 的 话 ， 应 该 对 调用 的 方式 比较 熟悉 ， 调 用 远程 函数 的 代码 如 下 所 示 : 
TestAction.doEcho{(text.getValue(), function(result, e})l{ 
var 七 = e.getTransaction!(); 
out .append (String.format('<p><b>Successful call to {0}.{1} with response:</b><xmp> 
{2}</xmp></p>', 
t.action, t.method, Ext.encode({result)))}); 
out.el.scrollTo('t', 100000, true); 
BE}:# 


因为 在 api .js 中 声明 了 TestAction 类 ， 并 定义 了 TestAction 类 中 的 doEcho() 方 法 ， 因 此 
这 里 可 以 直接 使 用 TestAction.doEcho() 进 行 调用 ， 这 样 就 会 直接 调用 到 后 台 的 TestAction 
类 的 doEcho() 方 法 ， 并 将 返回 的 结果 以 回调 函数 形式 传递 给 前 端的 JavaScript 肢 本。 

在 回调 函数 中 ，result 包 含 了 返回 的 所 有 数据 ， 回 调 函 数 的 第 二 个 参数 e 中 包含 了 此 次 调用 
的 各 种 设置 ， 最 主要 的 就 是 事务 rt， 事务 包含 了 此 次 调用 的 actoin、method 等 参数 。 这 些 都 是 交 
由 Ext Direct 自 动 处 理 的 , 前 台 与 后 台 交 互 的 过 程 以 及 实际 中 数据 处 理 的 方式 , 对 最 终 用 户 来 说 都 
是 没有 必要 了 解 的 ， 只 需 在 前 端的 JavaScript 中 调用 对 应 的 函数 ， 就 会 从 后 台 获 得 相应 的 数据 。 

Ext Direct 主 要 包含 两 种 调用 方式 , 一 种 是 我 们 上 面 提 到 的 远程 调用 方式 , 它 需 要 通过 api .js 
来 映射 后 端 暴露 的 服务 方法 , 通过 对 应 的 Provider 将 API 配 置 转换 为 前 端的 功能 对 和 象 ， 交 由 用 户 
使 用 。 男 一 种 调用 方式 为 轮 询 ， 它 的 作用 是 实现 客户 端 轮 询 。 我 们 只 需要 为 轮 询 类 型 的 Ext Direct 
指定 对 应 的 url，EXT 就 会 自动 在 后 台 局 动 轮 询 任务 ， 每 过 一 段 时 间 自 动向 后 台 发 起 请 求 ， 获 得 对 
应 的 结果 。 在 轮 询 操 作 完 成 后 会 以 事件 提醒 的 方式 交 由 前 端的 JavaScript 代 人 码 处 理 ， 因 此 在 将 Ext 
Direct 配 置 为 轮 询 方 式 之 后 ， 还 需要 在 代码 中 设置 对 应 的 事件 监听 器 ， 通 过 回调 函数 获得 轮 询 请 
求 的 结果 ， 对 应 代码 如 下 所 示 : 

Ext .Direct.on{'message', functiontle)l 

out .append{(Sstring.format('<p><i>{0}</i></p>', e.data)); 


out.el,.scrollTo({('t', 100000, true):; 
Fy 


上 述 代 码 中 ， 我 们 设置 了 对 message 事 件 的 监听 器 。 在 轮 询 发 出 message 事 件 时 ， 就 会 自动 
触发 回调 函数 ， 这 里 就 会 对 out 这 个 元 素 的 内 容 进 行 更 新 ， 并 进行 自动 滚动 。 

EXT 3.0 中 基于 Ext Direct 提 供 了 为 数 不 少 的 底层 支持 ， 我 们 可 以 在 表格 、 树 形 、 表 单 中 选择 
使 用 Ext Direct 方 式 与 后 台 进 行 数据 交互 。 
14.2.2 洞悉 Ext Direct 的 原理 

Ext Direct 到 底 是 怎样 实现 在 前 端 JavaScript 中 直接 调用 后 台 服 务 所 暴露 的 方法 呢 ? 我 们 可 以 
猜 到 ， 中 间 肯 定 是 借助 了 Ajax 进行 数据 交互 ， 但 这 些 数据 的 形式 到 底 是 怎么 样 的 呢 ? 如 果 我 们 确 
实 打 算 选择 使 用 Ext Direct 作 为 连接 前 后 端 应 用 的 桥梁 时 , 是 否 可 以 保证 这 些 封装 后 的 操作 可 以 完 
全 在 我 们 的 掌握 之 中 呢 ? 

答案 是 肯定 的 ，Ext Direct 实 际 上 只 利用 JSON 作 为 数据 的 交换 格式 ， 在 原来 的 Ajax 基础 上 提 
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供 了 自身 的 数据 交互 协议 , 应 用 的 前 后 端 使 用 同 种 协议 进行 调用 , 从 而 达到 屏蔽 后 端 实现 的 目的 。 
当 调 用 Ext Direct 的 函数 时 ，EXT 会 根据 API 配 置 发 送 图 14-3 中 格式 的 请 求 。 
= POST http:/ /localhost8080/direct/isp/router.jsp 200 °° 743ms 
Headers Post 响 筷 


{"action”: "TestAction" methoga"r doEcho”", "data”;["1"], "type”;“ rpc", "tid":2} 
图 14-3 ”Ext Direct 触 发 的 请 求 


口 action 表示 期 望 调 用 的 远程 类 。 
D method 表 示 期 望 调用 的 远程 方法 。 
D data 表 示 调 用 远程 方法 时 传递 的 参数 ， 它 的 类 型 是 一 个 数组 ， 数 组 中 的 参数 个 数 与 
Ext .app .REMOTE_API 中 对 应 的 len 值 相同 。 

D type 表 示 使 用 rpc 方 式 进行 远程 调用 。 
D tid 表 示 此 次 调用 的 事务 ia， 它 可 以 用 来 在 批量 调用 中 区 分 每 个 对 应 的 请 求 和 响应 。 
后 台 返 回 的 响应 信息 内 容 如 图 14-4 所 示 。 

‘5 POST http://localhost:8080/direct/jsp/router.jsp 200 Ok 749ms | 


| 
Headers Post 咏 应 | 
| 








type; "rpe’, 

action: ' Test&ction ， 
method: ‘ doFcho’, 
tL 

result; ‘x’ 


图 14-4 ”处 理 Ext Direct 请 求 后 返回 的 信息 

Dresult 表 示 远 程 方法 调用 后 返回 的 内 容 。 

口 action 表示 调用 的 远程 类 。 

D method 表 示 调 用 的 远程 方法 。 

D _ type 表 示 使 用 rpc 方 式 进行 远程 调用 。 

D tiq 表 示 此 次 调用 的 事务 ida， 它 可 以 用 来 在 批量 调用 中 区 分 每 个 对 应 的 请 求 和 响应 。 

从 这 两 个 对 应 的 请 求 与 响应 内 容 可 以 看 到 ， 所 有 的 action、method、type、tid 都 是 一 一 
对 应 的 。 实 际 上 , Ext Direct 会 根据 这 些 对 应 的 参数 判断 对 应 的 操作 该 发 送 给 后 台 的 哪个 方法 处 理 ， 
并 且 后 台 返 回 的 响应 信息 应 该 交 给 哪 一 个 回调 函数 。 

这 就 是 Ext Direct 的 基础 实现 ， 其 上 层 所 支持 的 一 切 功 能 都 由 这 样 的 请 求 与 响应 数据 格式 支 
撑 ， 而 不 同 平台 实现 的 Ext Direct 后 端 ， 都 需要 解析 请 求 中 特定 的 信息 内 容 ,根据 其 中 定义 的 参数 
在 后 端 进行 调用 , 并 将 返回 的 结果 组 装 成 Ext Direct 所 需 的 格式 返回 给 前 端 , 这 样 实现 的 循环 确保 
了 Ext Direct 的 正常 应 用 。 
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14.2.3 ”使 用 directingine 支持 Ext Direct 


EXT 官 方 并 未 提供 Java 平 台 下 的 Ext Direct 支 持 组 件 , 但 是 Java 开 源 社区 的 力量 实在 太 庞大 了 ， 
第 三 方 已 经 推出 了 好 几 套 在 Java 平 台 下 支持 Ext Direct 的 组 件 库 。 其 中 比较 成 熟 的 是 directjingine， 
它 文 持 直 接 在 POJO 中 使 用 注解 配置 Ext Direct 调 用 的 远程 方法 。 下 面 我 们 就 来 看 -下 如 何 使 用 
directjingine 支 持 Ext Direct。 

directingine 的 官方 网 站 在 http://code.google.com/p/directjngine/， 最 新 的 发 布 版 本 是 directjngine- 
1.0.zip， 可 以 在 http://code.google.com/p/directjngine/downloads/list 下 载 到 发 布 包 和 源 代码 。 需 要 注 
意 的 是 directjngine 中 使 用 了 大 量 JDK 5 中 添加 的 特性 ， 因 此 只 能 使 用 在 JDK 5 及 以 上 版 本 。 

directingine 的 富 方 发 布 包 中 已 经 包含 了 运行 时 必须 的 第 三 方 依赖 库 , 可 以 在 lib 目 录 下 找到 这 
些 依赖 库 ， 如 下 所 述 。 

D directjngine.1.0.jar: directjngine 核 心 库 。 

口 gson-1.3.jar: JSON 与 Java 对 象 实现 相互 转换 的 工具 库 。 

D log4j-1.2.15.jar: 日 志 库 。 

DO commons-fileupload-1.2.1.jar 和 commons-io-1.4.jar: 用 来 支持 文件 上 传 。 

D jargs-1.0.jar、rhino-1.6R7.jar 和 yuicompressor-2.4.2.jar: 用 来 生成 JavaScript 脚 本 。 

下 一 步 我 们 需要 编写 提供 给 前 台 调 用 的 远程 方法 , 这 里 借用 EXT 官 方 例子 中 提供 的 Ext Direct 
实例 ， 它 们 分 别 是 restaAction.java 和 Profile.java。 

TestAction.java 主 要 用 来 演示 使 用 远程 方法 为 Ext Direct 提 供 数据 ， 其 中 定义 了 3 个 方法 ， 
分 别 是 doEche ()、multiply() 和 getTree()， 具 体 代码 内 容 如 下 所 示 : 


package sample:; 


import java.util.ArrayList; 
import java.util.List; 


import. com.softwarementors.extjs.djn.config,annotations.DirectMethod: 


public class TestAction 《 
DirectMethod 
public String doEchol( String data ) { 
return data; 
} 


DirectMethod 
public druble multiply( String num ) { 
double num_ = Double.parseDouble (num); 


return num * 8.0; 


} 


Public static class Node { 
public String id: 
public String text; 
public boolean leaf; 

} 
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} 


从 上 述 的 restaction.java 中 可 以 看 到 ， 代 码 内 容 与 我 们 通常 使 用 的 POJO 基 本 没有 什么 区 
出， 唯一 特别 的 就 是 方法 上 使 用 了 directjingine 提 供 的 注解 。 实 际 上 directjingine 就 是 通过 这 些 
@DirectMethod 注 解 与 Ext Direct 中 的 请 求 与 响应 进行 关联 ， 实 现 远 程 方法 调用 功能 的 。 

下 面 我 们 还 需要 在 web.xml 中 为 directjngine 进 行 相应 的 配置 ， 这 样 它 才 可 以 处 理 客户 端 发 送 
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@DirectMethod 
public List<Node> getTreel( String iqd ) { 


List<Node> result = new AMrrayList<Node>(); 
if( id.equals("root")) { 
for{( int 1 = 1; i <= 5; ++i ) { 
Node node = new Node(}; 
nodeiid = ne i; 
node.text = "Node " + 工 ; 
node.leaf = false; 
result.add (node); 
} 
} 
else if( id.length()} == 2) { 
String num = id.substring(1); 
让 
Node node new Node{): 
node.id = "id" + i; 
node.text = "Node " + num + ".* + i; 
node.leaf = true; 
result .add (node)}):; 
} 
} 


return result:; 


来 的 请 求 ， 并 返回 相应 的 响应 数据 ， 代 码 如 下 : 


<?xml version="1.0" encoding="UTF-8"?> 


<web-app xmlns="http://java.sun.com/xml/ns/javaee" 


14.2 介绍 Ext Direct 


xmlns:xsi="http://www.w3.0rg/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml /ns/javaee 
http://java.sun.com/xml/ns/javaee/web-app_ 2_4.xsd" 


version="2.4*> 


<1-- DirectJNgine servwlet --> 
<servlet> 


<servlet-name>DijnServlet</servlet-name> 


<servlet-class>com.softwarementors.extjs.djn.servlet .DirectJNgineServlet</servlet-class> 


<init-param> 
<param-name>debug</param-name> 
<param-value>true</param-value> 
</init-param> 


<init-param> 
<param-name>minify</param-name> 
<param-value>true</param-value> 
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</init-param> 


<init-param> 
<param-name>providersUrl</param-name> 
<param-value>djn/directprovider</param-value> 
</init-param> 


<init-param> 
<param-name>batchRequestsMultithreadingEnabled</param-name> 
<param-value>true</param-value> 

</init-param> 


<init-param> 
<param-name>apis</param-name> 
<param-value> 
sample 
</param-value> 
</init-param> 


<init-param> 
<param-name>sample,.apiFile</param-name> 
<param-value>sample/api.js</param-value> 
</init-param> 


<init-param> 
<param-name>sample.apiNamespace</param-name> 
<param-value>Ext .app</param-value> 
</init-param> 


<init-param> 
<param-name>sample.classes</param-name> 
<param-value> 
sample.TestAction 
</param-value> 

</init-param> 


<load-on-startup>1l</load-on-startup> 
</servlet> 


<servlet-mapping> 
<servlet-name>DinServlet</servlet-name> 
<url-pattern>/din/directprovider/*</url-pattern> 
</Sservlet-mapping> 
</web-app> 


从 web.xml 中 的 配置 可 以 看 到 ，directjngine 将 用 来 处 理 以 /ajn/directprovider/ 为 前 级 的 
所 有 请 求 。 如 果 前 台 发 送 的 请 求 是 以 /djn/directprovider/ 开 始 的， 那么 这 个 请 求 就 会 自动 分 
配给 com. softwarementors.extjs.djn.servlet .DirectJNgineServlet 进 行 处 理 。 


之 后 就 可 以 在 客户 端 导 入 directjngine 自 动 发 布 的 api .js 使 用 Ext Direct 了 。 


14.3 ”介绍 EXT 3.0 中 新 增 的 组 件 
EXT 3.0 中 又 新 增 了 几 种 拥有 华丽 外 观 的 组 件 ， 下 面 我 们 就 来 逐一 介绍 这 些 新 组 件 。 
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14.3.1 行 编辑 器 


如 图 14-$ 所 示 ， 最 新 添加 到 表格 中 的 行 编辑 器 (Row Editor) 是 一 个 令 人 惊叹 的 组 件 ， 我 们 
借 此 可 以 一 次 性 为 某 一 行 的 数据 进行 批量 修改 ， 不 必 再 像 EditorGridPanel 中 一 样 为 了 修改 每 一 个 
单元 格 进行 多 余 的 双击 了 。 而 且 行 编辑 器 还 支持 保存 (save) 和 取消 (cancel) 操作 ， 如 此 一 来 
就 算是 编辑 错误 ， 也 可 以 取消 掉 ， 不 会 对 实际 数据 产生 影响 。 


行 疾 和气 莉 
id name SEX Status 
1 name 1 male true 
name 2 female false 
3 name 3 male 三 
号 ne > talse 
Save Cance| 
5 FE true 


图 14-5 行 编辑 器 的 编辑 状态 


作为 一 个 额外 提供 的 插件 ， 行 编辑 器 使 用 起 来 尤其 方便 。 要 启用 行 编辑 器 ,我 们 只 需 在 表格 
的 plugins 属 性 中 添加 一 个 Ext .ux .RowEditor 的 实例 ， 然后 在 双击 表格 中 某 一 行 的 时 候 就 会 看 
到 行 编辑 器 。 


plugins: [new Ext.ux.grid.RowEditor{)], 


不 过 为 了 定义 每 一 列 单元 格 使 用 的 输入 控件 ， 我 们 还 要 为 columns 添 加 一 个 eaitor 属 性 ， 
里 边 定义 了 输入 控件 的 xtype 和 校 验 规则 。 


editor: { 
xtype: 'textfield', 
allowBlank: false 
} 


这 里 我 们 可 以 定义 任意 一 个 表单 输入 控件 ， 比 如 checkbox: 


editor: { 
xtype: 'checkbox' 
} 


最 后 还 要 记得 ， 因 为 这 个 扩展 不 属于 EXT 核 心包 ， 所 以 在 使 用 时 需要 先 把 examples/grid 中 的 
RowEditorjs 引 入 页 面 中 ， 还 要 添加 额外 的 CSS 样 式 和 对 应 图 片 。 切 记 切 记 ! 
14.3.2 ”进度 条 分 页 组 件 


这 个 组 件 的 功能 是 把 原来 的 分 页 工具 条 变 成 进度 条 的 样子 ， 效 果 绚 丽 了 好 几 倍 ， 如 图 14-6 
所 示 。 
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进 产 条 分 买 把 厦 : 

id name SEX status 
1 name 1 male true 
2 name 2 female false 
3 naime 3 male false 


1- 305 | 
图 14-6 ”用 进度 条 的 方式 来 显示 分 页 


使 用 方法 尤为 简单 , 只 要 在 Ext. PagingToolbar 中 添加 Ext .ux.ProgressBarPager 这 个 组 
件 就 可 以 了 。 当然 还 要 记得 在 使 用 前 在 页 面 中 引入 ProgressBarPager .js 这 个 文件 。 

示例 代码 如 下 , 个 人 感觉 使 用 这 个 组 件 控制 分 页 也 不 精准 ， 但 是 从 演示 的 方面 来 说 ,还 是 非 
党 有 用 的 。 


bbar: new Ext.PagingToolbar ({ 

pageSize: 3, 

store: store, 

displayInfo: true, 

Plugins : new Ext .ux.ProgressBarPpager{) 
}) 


14.3.3 ”缓冲 式 表格 视图 


这 个 扩展 的 理念 应 该 是 来 自 extjs.com 官 网 上 的 LiveGrid 组 件 ， 因为 一 般 认为 EXT 的 表格 在 显 
示 超 过 200 条 数据 的 时 候 就 会 出 现 反应 迟缓 的 现象 ， 生 然 不 知道 为 什么 非 要 在 一 个 页 面 上 显示 这 
么 多 数据 。 不 过 确实 有 认为 EXT 存 在 性 能 问题 的 开发 人 员 说 ， 他 们 每 次 都 在 EXT 的 表格 里 显示 
1 000 条 数据 ， 这 是 由 他 们 的 技术 总 监 决 定 的 ， 而 且 认 为 EXT 不 支持 除 此 之 外 的 显示 方式 ， 因 此 
就 来 向 我 们 抱怨 EXT 的 性 能 问题 。 

不 过 有 的 时 候 确 实 有 显示 数据 过 多 反应 速度 缓慢 的 情况 出 现 ， 这 时 就 要 借助 3D 游 戏 里 的 一 
种 实时 演 染 的 概念 了 ， 即 表格 里 显示 哪些 数据 ， 就 把 哪些 数据 画 出 来 ， 这 样 不 会 去 处 理 不 显示 的 
那些 DOM， 也 就 提高 了 整体 的 效率 。 

我 们 分 别 用 普通 表格 视图 (Gridview) 和 缓冲 式 表格 视图 (Bufferview) 显示 1 000 条 
数据 进行 实验 ， 这 会 在 初始 化 的 时 候 明 显 感觉 到 速度 的 不 同 ， 但 在 拖 电 滚 动 条 的 时 候 没 感觉 到 差 
多 少 。 

使 用 缓冲 式 表格 视图 是 非常 简单 的 ， 只 家 单独 为 表格 设置 一 个 view 参 数 就 可 以 了 。 


View: new Ext .ux.BuffervViewt{! 
rowHeight: 20, 
scrollDelay: false 





i1 Pege 102 加 全 


}) 
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14.3.4 ”标签 面板 的 滚动 菜单 
这 是 一 个 用 于 TabPanel 的 组 件 , 可 以 在 标签 过 多 的 时 候 显示 一 个 下 拉 菜单 , 供用 户 进行 选择 ， 


如 图 14-7 所 示 。 
第 一 个 tab tab-D tab-] tab tabr; 夫 
ni 
tab.0 | lems6-10 $ 
| tab-1 | lems 11. 15 
{ teb-2 hems 16- 20 》 
| ob.3 | Hems 21-23 


图 14-7 ”使 用 滚动 菜单 显示 滋 出 的 TabPanel 


因为 又 是 一 个 扩展 ， 我 们 需要 做 的 只 是 设置 plugins， 不 过 还 要 记得 引入 tabs 下 的 
TabScrollerMenu.js 和 TabsScrollerMenu.css, 一 定 要 记得 在 页 面 中 导入 对 应 的 CSS 样 式 , 耕 
则 标签 多 出 来 的 时 候 页 面 就 会 出 错 。 


Var scrollerMenu = new Ext.ux.TabSscrollerMenutt{ 
maxText : 15, 
pageSize :; 5 

时 


var tabs = new Ext.Tabranellt{ 
height: 200, 
width: 400, 
activeTab: 0., 
enableTabscroll; true, 
resizeTabs: true, 
minTabWidth: 75, 
frame: true, 
plugins: [scrollerMenul], 





items: {tf 
title : ' 第 - -个 tab' 
jE 
renderTo: ‘tabs' 坡 埋 工具 条 人 矿 册 
}); toolbarf toolbar2 toolbar3 i 
14.3.5 ”处理 工具 条 溢出 这 ania 
当 工 具 条 中 按钮 过 多 时 ,EXT 会 自动 隐藏 右 侧 过 多 的 按 | toobar | 
钮 ， 并 将 这 些 按钮 以 下 拉 菜 单 的 形式 显示 在 工具 条 右 侧 。 如 | 
14-8 所 示 。 toolber8 
这 个 功能 十 分 贴心 , 不 需要 设置 任何 插件 ， 直 接 集成 在 | me | 
Ext .Toolbar 中 。 在 工具 条 中 的 项 目 很 多 的 时 候 自动 使 用 这 | 
个 功能 ， 不 用 我 们 多 写 一 行 代 码 。 图 14-8 ”对 工具 条 溢出 的 处 理 
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Last Modified Size 
04-01 10:10 am 1000 bytes 
04-01 10:10 am 1000 bytes 


EXT 3.x 中 新 增 的 列表 视图 (ListView) 组 件 是 一 
种 整合 型 的 列表 视图 ， 它 比 表 格 更 简单 、 更 轻巧 、 功 
能 更 少 ， 也 能 满足 大 部 分 的 显示 功能 。 它 也 是 因为 好 
多 人 在 抱怨 表格 中 包含 的 功能 太 多 ， 和 希望 EXT 可 以 提 
供 一 套 可 以 实现 简单 显示 效果 的 组 件 而 出 现 的 。 

列表 视图 组 件 如 图 14-9 所 示 。 

图 14-9 中 的 实现 代码 如 下 所 示 。 

Var listView = new Ext.ListView!(t{ 图 14-9 ”使 用 列表 视图 实现 轻 量 级 表格 


store: new EXxL .data.SimpleStore({ 
data: [ 
[ "name'，'2009-04-01 10:10:10', 1000]， 
['name'， '2009-04-01 10:10:10', 1000] 


14.3.6 ”列表 视图 ae 
Fie 


| 
fields: ['name', { 
name: ‘lastmod', 
type: ‘date', 
dateFormat: 'Y-m-d H:i:s' 
}, ‘size'] 
}) ， 
multiSelect: true, 
emptyText: ‘No data to display', 
reserveScrollOffset: true, 


columns: [{ 
header: '‘'File', 
dataIndex: ‘name'’ 
},4 
header: 'Last Modified', 
GataIndex: ‘lastmod', 
tpl: '{lastmod:date("m-d h:i a")}' 


header: 'Size', 
Gatalndex: 'size', 
tpl: ‘{size:fileSize}'!, 
align: ‘right' 
}] 
站 
Var panel = new Ext.Panelltt 
title: “列表 视图 ' ， 
layoutsr “Fit 
width: 300, 
height: 200, 
items: [listView], 
renderTo: '1istview' 
Ts 


因为 ListView 不 是 Panel 的 子 类 , 如 果 想 设置 标题 、 布 局 等 , 就 要 把 Listview 再 放 到 panel 


中 。 
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14.3.7 工具 条 中 的 分 组 按钮 


这 个 组 件 是 在 EXT 3.0 高 级 按钮 基础 上 实现 的 
扩展 。 虽 然 在 它 自 带 的 例子 里 ， 那 些 放 在 工具 条 上 
的 按钮 都 很 酷 ， 但 是 也 给 人 很 烦 乱 的 感觉 ， 实 际 开 
发 中 如 何 使 用 这 个 新 增 功能 , 还 是 看 各 位 的 功底 了 。 

工具 条 按钮 如 图 14-10 所 示 。 

首先 需要 设置 的 是 xtype: 'buttongroup'， 
然后 在 其 中 添加 各 式 各 样 的 按钮 ， 这 些 按钮 的 详细 
用 法 参考 第 9 章 。 示 例 代 码 如 下 所 示 。 

tbar: new Ext.Toolbar([t{ 

xtype: 'buttongroup ' ， 
items: [{ 
text: 
二 本 : 
七 马 X 七 ,: 
}] 
}, 
xtype: ‘buttongroup', 
items: [{ 
text: 
Vx A 
text: 
}] 
}] 7 


14.3.8 ”高 级 按钮 


EXT 3.x 提 供 的 按钮 太 复杂 了 ， 我 们 面 对 的 不 
再 是 以 前 那 种 要 么 是 图 片 要 么 是 文字 的 简陋 选择 。 
如 今 支持 的 是 图 文 混 排 和 各 式 各 样 的 对 齐 格式 ， 如 
果真 要 一 一 讲解 , 就 会 远 远 超出 现 有 的 篇 幅 . 所 以 ， 
到 底 EXT 3.x 中 支持 了 多 少 种 按钮 效果 ， 还 是 靠 大 
家 慢 慢 去 examples 里 体味 ， 这 里 只 给 出 几 个 基本 
例子 ， 让 大 家 饱 饱 眼福 。 抛 砖 引 玉 哦 。 如 图 14-11 
所 示 。 

如 今 按 钮 最 大 的 改进 就 是 支持 了 3 种 规格 : 
small、medium 和 large。 这 样 我 们 可 以 选择 在 各 种 


‘textl': 


‘text2' 


‘text3' 


‘texta' 


text1 itext2 . text3 text4 


Toolbar Button Group 


图 14-10 工具 条 中 使 用 分 组 按钮 


图 14-11 实现 多 种 样式 的 按钮 


规格 的 按钮 上 增加 文字 或 者 是 图 形 ， 获 得 多 种 多 样 的 按钮 效果 。 


Var panel = new Ext, Panel(1{ 


title: ' 高 级 按钮 '， 
width: 300, 
height: 200, 
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defaultType: ‘button', 
items: [([{ 
text: ‘Small', 
scale: 'small' 


text: 'Medium', 
scale: ‘medium' 


texts "Large', 
scale: 'large' 
}] 


renderTo: ‘buttons'! 
P33 


14.3.9 竖 直 分 组 的 标签 面板 
以 前 总 有 人 说 想 要 竖 直 的 标签 面板 ， 现 在 这 个 功能 来 了 ， 如 图 14-12 所 示 。 


复 在 分 秀 的 标 等 面板 


» tab panel. this is the #1 tab. 





图 14-12” 竖 直 分 组 的 标签 面板 


为 了 使 用 竖 直 标签 面板 ， 我 们 要 为 页 面 引入 3 个 文件 ， 分 别 是 GroupTabPaneljs、GroupTab.js 
和 一 个 样式 文件 grouptabs.css。 

其 实 竖 直 标签 面板 也 继承 自我 们 以 前 经 常 使 用 的 TabPanel， 只 是 这 次 它 的 标签 可 以 放 在 左 侧 
了 。 实 际 使 用 的 时 候 首先 需要 配置 最 外 层 组 件 的 xtype, 这 里 要 使 用 xtype: 'grouptabpanel'， 
然后 在 竖 直 分 组 的 标签 面板 (grouptabpanel) 里 设置 activeGroup， 这 是 告诉 EXT 默 认 显示 哪 
个 分 组 。 实 际 上 每 个 grouptabpanel 的 items 都 是 一 个 分 组 ， 每 个 分 组 里 又 有 多 个 面板 ， 这 样 最 
后 组 成 了 一 份 复 杂 的 层级 结构 ， 竖 直 分 组 的 标签 面板 中 使 用 activeGroup 设 置 默认 显示 哪个 组 ， 
而 组 中 又 使 用 mainItem 设 置 默认 显示 哪个 面板 。 实 现代 码 如 下 所 示 。 


Var panel = new Ext.Panell(t 
title: ' 坚 直 分 组 的 标签 面板 '， 
width: 500, 
height: 200, 
items: [{ 

xtype: 'grouptabpanel', 
tabwWidth: 80, 
activeGroup: 0, 
items: [{ 

mainItem: 0, 
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EE DL 
items: [{ 
tit StaD 
tabTip: 'Tickets tabtip', 
html: 'This is a group tab panel. this is the #1 tab.’ 
}] 
},. + 
mainItem: 0, 
bitles S002”: 
items: [{ 
title;: ‘tab 2°, 
tabTip: 'Tickets tabtip', 
html: 'This is a group tab panel. this is the #2 七 ab. 
| 
}] 
}]5 
renderTo; 'panel' 
})? 


14.4 在 EXT 3.0 中 使 用 Flash 报表 


EXT 3.0 使 用 的 Flash Chart 来 源 于 YUI， 其 中 提供 了 包括 柱状 图 、 饼 状 图 等 多 种 图 形 报表 ， 并 
提供 了 图 标 与 EXT 组 件 之 间 的 完美 整合 ， 不 仅 可 以 直接 在 Ext .Panel 中 显示 图 表 ， 还 可 以 通过 
Ext .data.Store 为 图 表 提 供 数 据 。 

首先 定义 一 个 JsonSstore 为 我 们 现在 所 要 演示 的 所 有 图 表 提 供 数 据 ， 代 码 如 下 : 


Var store = new Ext.data.JsonStorel(t{ 

fields: ['name', 'visits', ‘'views'], 

data: | 
{name: 'Jul 07', visits: 245000, views: 3000000}, 
{name: 'Aug 07', visits: 240000, views: 3500000}, 
{name:'Sep 07', visits: 355000, views: 4000000 } ， 
{name:'Oct 07', visits: 375000, views: 4200000}, 
{name:'Nov 07', visits: 490000, views: 4500000), 
{name: ‘Dec 07', visits: 495000, views: 5800000}, 
{name: 'Jan 08', visits: 520000, views: 6000000}, 
{name: 'Feb 08', visits: 620000, views: 7500000} 


内 必 - 


JsonStore 中 包含 3 列 数据 ， 分 别 是 name、visits 和 views， 其 中 name 的 类 型 是 字符 串 ， 其 
他 两 列 的 数据 类 型 为 数字 。 下 面 所 演示 的 所 有 图 表 中 显示 的 数据 都 来 自 于 这 个 Jsonstore。 


14.4.1 柱状 图 
实现 柱状 图 (ColumnChart〉 的 代码 如 下 所 示 : 


new Ext.Panell({ 
title: ‘Chart’, 
renderTo: ‘'container', 
width:500, 
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height:300, 
layout: ‘fit', 


items: { 
xtype: ‘columchart', 
Url: ',../../resources/charts.swf', 


store: store, 
xField: ‘name', 
yField: 'visits', 
listeners: { 
itemclick: function(o){ 
Var rec = store.getAt(o.index); 
Ext .example.msg('Item Selected’, ‘You chose {0},.', rec.get('name')); 


} 
让 


将 xtype 指 定 为 columnchart， 即 在 一 个 Panel 中 创建 了 柱状 图 ， 图 表 的 数据 来 自 于 上 面 定 
义 好 的 score，xFiela 指 定 横 轴 数据 显示 name 列 的 数据 ，vField 指 定 纵 轴 数据 显示 vistis 列 的 
数据 ， 最 终 的 显示 效果 如 图 14-13 所 示 。 


Ehart 
“00000 Feb 08 
E20000 
E00000 1 
son0000 
43600006 
300000 
200000 ， 
100000 
0 
JU OF Aug07 5epD7 CtO7 Nov 07 Dec 07 ]ar08 Feb 08 


图 14-13 ”柱状 图 


14.4.2 横向 柱状 图 
实现 横向 柱状 图 (BarChart〉 的 代码 如 下 所 示 : 


new Ext .Panel({ 
titLer Ohart, 
renderTo: ‘container', 
width:500, 
height :300, 
La st 
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items: { 
xtype: ‘'barchart', 
url; '../.,/resources/charts.swf', 
store: store, 
yField: ‘name', 
xField: 'visits', 
listeners: { 
itemclick: function(o})t{ 
Var rec = Store.getAt({(o.index); 
Ext .example.msg!{('Item Selected', 'You chose {0}.', rec.get('name’')); 


} 
}); 


将 xtype 指 定 为 barchart， 即 在 一 个 Panel 中 创建 了 横向 柱状 图 ， 图 表 的 数据 来 自 于 上 面 定 
义 好 的 score，xFielq 指 定 横 轴 数据 显示 visits 列 的 数据 ，yFiela 指 定 纵 轴 数据 显示 name 列 的 
数据 ， 最 终 的 显示 效果 如 图 14-14 所 示 。 


{Chart 


MO7 
Aug O07 
Sep O07 
Oct O07 
Nov D7 


Derc OF 


a 


i00000 200000 300000 400000 cA0non 6n06D0D 20000D 


图 14-14 横向 柱状 图 


14.4.3 ”折线 图 
实现 折线 图 (LineChart〉 的 代码 如 下 所 示 : 


new Ext.Panel l(t 
ti hurt!: 
renderTo: 'container', 
width:500, 
height:300, 
layout: 'fit", 





items: { 
xtype: 'linechart', 
Url: '../../resources/charts.swf', 
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store: store, 
xField: ‘name', 
yField: 'visits', 
listeners: { 
itemclick: functiont{o})t 
Var rec = Store.getAt (o.index); 
Ext .example.msg('Item Selected', ‘You chose {0}.', rec.get(‘'name')); 


}})? 

将 xtype 指 定 为 linechart， 即 在 一 个 Panel 中 创建 了 折线 图 ， 图 表 的 数据 来 自 于 上 面 定义 
好 的 store，xFielda 指 定 横 轴 数据 显示 name 列 的 数据 ， YField 指 定 纵 轴 数据 显示 visits 列 的 数 
据 ， 最 终 的 显示 效果 如 图 14-15 所 示 。 


Chart 
700000 
60000D 1 
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300000 
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图 14-15 ”折线 图 


14.4.4 ”人 饼 状 图 
实现 饼 状 图 (PieChart) 的 代码 如 下 所 示 ; 


new Ext.Panelt{t{ 
title: 'Chart', 
renderTo: 'container', 
width:500, 
height:300, 
Lavonks"Ett 


items: { 
xtype: 'piechart', 
Url: '../../resources/charts .swtf', 


store: store, 
categoryField: 'name'， 
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dataField: 'visits', 
listeners: { 
itemclick: function(o)t{ 
Var rec = store.getAtt{o.index); 
Ext . example.msg('Item Selected', 'You chose {0}.', rec.get{'name')); 


}}; 


将 xtype 指 定 为 barchart， 即 在 一 个 Panel 中 创建 了 饼 状 图 ， 图表 的 数据 来 自 于 上 面 定 义 好 
的 store，categorvyField 指 定 类 别 数据 显示 name 列 的 数据 ，daataFiela 指 定 扇 区 数据 显示 
vists 列 的 数据 ， 最 终 的 显示 效果 如 图 14-16 所 示 。 


Chart 





图 14-16 ”人 饼 状 图 


14.4.5 ”柱状 栈 图 
实现 柱状 栈 图 〈StackedColumnChart) 的 代码 如 下 所 示 : 


new Ext .Paneli{ 
title: ‘Chart'’', 
renderTo: ‘container', 
width:500, 
height:300, 
Livouts tit 


items: { 
xtype: 'stackedcolumchart', 
Url: '../../resources/charts.swf', 


store: store, 
xField: ‘'name', 
series: [{ 
yField: "visits", 
displayName: "visits:" 
je 
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yField: "views", 
displayName: "views:" 
}]， 
yAxis: new Ext.chart.NumericAxis!(t{ 
stackingEnabled: true, 
labelRenderer: Ext.util.Format.usMoney 
}) ， 
listeners: { 
itemclick: function(o)t{ 
Var rec = Store.getAt(o.index); 
Ext .example.msg('item Selected’', 'You chose {0}.', rec.get!('name')); 


} 
入 


将 xtype 指 定 为 stackedcolumnchart， 即 在 一 个 Panel 中 创建 了 柱状 栈 图 ， 图 表 的 数据 来 
自 于 上 面 定 义 好 的 store。xField 指 定 横 轴 数 据 显示 name 列 的 数据 ， 因 为 柱状 栈 图 拥有 多 个 纵 
轴 数 据 ， 所 以 需要 使 用 series 代 替 原 本 柱状 图 中 的 yFiela 来 设置 纵 轴 数 据 。 这 里 设置 了 两 部 分 
数据 visits 和 views， 它 们 将 以 堆 登 形式 显示 在 纵 轴 部 分 ， 另 外 还 要 为 yaxis 添 加 stacking- 
Enabled:true 参 数 ， 这 样 就 完成 了 柱状 栈 图 的 设置 。 最 终 的 显示 效果 如 图 14-17 所 示 。 


Chart 
$9,000,000.00 
$8,000,000,00 
$7,000,000.,00 
$6.000,000.,00 
$5S,000,000,.00 
$4 ,D000,000.,00 
$3,000,000,.00 1 
$2,000,000,00 
$1 ,000,000.00 
ooL 本 局 面 是 靖 一 图 辆 
WB7 Aug07 5epg07 Cetg Novd7 Dec 07 Jan06 Feb 08 
图 14-17 ”柱状 栈 图 


14.4.6 ”横向 柱状 栈 图 
实现 横向 柱状 栈 图 (StackedBarChart) 的 代码 如 下 所 示 : 


new Ext ,Pamnel({ 
title: 'Chart ' ， 
renderTo: ‘container', 
width:500, 
height:300, 
aut 


Download at Pin5i.Com 


http://52pdf.taobao.com 


14.4 在 EXT3.0 中 使 用 Flash 报表 411 


items: { 
xtype: 'stackedbarchart', 
url: '../../resources/charts,swf', 


store: store, 

yField: ‘name', 

series: [{ 
xField: "visits", 
displayName: "visits:" 

je 浊 
xField: "views", 
displayName: "views:" 

}]， 

xAxis: new Ext.chart.NumericAxist{t{ 
stackingEnabled: true, 
labelRenderer: Ext.util.Format .usMoney 

}) 

} 
3 


将 xtype 指 定 为 stackeGbarchart， 即 在 一 个 Panel 中 创建 了 横向 柱状 栈 图 ， 图 表 的 数据 来 
自 于 上 面 定义 好 的 store。yField 指 定 横 轴 数 据 显示 name 列 的 数据 ， 因 为 横向 柱状 栈 图 拥有 多 
个 横 轴 数据 ， 所 以 需要 使 用 series 代 替 原 本 横向 柱状 图 中 的 xField 来 设置 横 轴 数据 。 这 里 设置 
了 两 部 分 数据 visits 和 views， 它 们 将 以 堆 营 形式 显示 在 横 轴 部 分 ， 另 外 还 要 为 xAxis 添 加 
stackingEnabled:true 参 数 ， 这 样 就 完成 了 横 柱 状 栈 图 的 设置 。 最 终 的 显示 效果 如 图 14-18 所 


外 。 


图 14-18 ”横向 柱状 栈 图 


14.4.7 混合 
我 们 也 可 以 通过 设置 不 同类 型 的 series 实 现 混合 图 ， 实 例 代码 如 下 所 示 : 


new Ext.Panelt{t{ 
title: ‘Chart', 
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renderTo: ‘container', 
width:500, 

height:300, 

layeuts £1it?, 


items: { 

xtype: 'stackedcolumnchart', 

url: '../,../resources/charts.swf', 

store: store, 

xField: 'name'， 

series: [{ 
type: 'column’, 
yYyField: "views", 
displayName: "views:" 

Fs 
type: 'line', 
yField: "visits", 
displiayName: "visits:" 

9， 

Yazxis: new Ext.chart.NumericAxis!{{ 
stackingEnabled: true, 
labelRenderer: Ext.util.Format.usMoney 

}) 

} 
bh 区， 


上 述 代 码 为 series 中 的 不 同 部 分 设置 了 不 同 的 类 型 ，type: “column ' 表 示 views 列 的 数据 
将 以 柱状 图 的 形式 显示 ， type:'1ine' 表 示 visits 列 的 数据 将 以 折线 图 的 显示 ， 最 终 的 显示 效 
果 如 图 14-19 所 示 。 


‘Chart 
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图 14-19 ”混合 图 


14.5 ”EXT 3.1 带 来 的 新 特性 
EXT 3.1 的 发 布 比 预期 推迟 了 一 个 月 左右 ， 但 这 段 时 间 的 等 待 是 绝对 值得 的 ， 因为 这 次 版 本 


Download at Pin5i.Com 


http://52pdf.taobao.com 


14.5 EXT 3.1 带 来 的 新 特性 。 413 


更 新 不 但 为 整体 框架 实现 了 极 高 的 性 能 提升 , 还 为 我 们 带 来 了 大 量 奇妙 的 高 级 组 件 。 下 面 将 逐一 
进行 介绍 。 


14.5.1 解决 内 存 泄露 


使 用 EXT 之 类 的 富 客 户 端 框架 进行 开发 ， 一 般 都 会 采用 one page one application 的 开发 方式 ， 
一 方面 因为 ext-all.js 的 体积 有 点 儿 大 ， 页 面 刷 新 会 感觉 有 点 儿 卡 ， 另 一 方面 因为 大 量 使 用 Ajax 不 
需要 刷新 页 面 就 可 以 实现 与 后 台 交 互 。 

但 是 ，one page one application 的 开发 方式 也 会 造成 一 定 问 题 ， 最 明显 的 问题 就 是 内 存 泄露 。 
在 间 一 个 页 面 中 重复 进行 多 次 DOM 操 作 后 ， 平 时 注意 不 到 的 内 存 损耗 会 慢 慢 积累 起 来 ， 逐 渐 占 
据 浏览 器 的 内 存 ， 导 致 整体 应 用 越 来 越 慢 。 

EXT3.1 终 于 带 来 了 官方 提供 的 内 存 泄 露 解决 方案 ， 特 别 是 这 些 解 决 方案 可 以 在 IE 6+ 系 列 的 
浏览 器 下 发 挥 极 大 作用 。 

1. 解决 DOM 泄 露 

DOM 洪 露 造成 的 问题 一 直 是 困扰 开发 者 的 大 问题 ， 每 次 在 我 们 使 用 完 一 个 组 件 后 而 没有 调 
用 aestroy() 畏 数 进行 销毁 时 ， 就 会 造成 DOM 洪 露 。EXT 动 态 创建 的 DOM 会 一 直 驻 留 在 内 存 中 ， 
无 法 被 内 存 管 理 器 回收 。 实 际 上 在 旧版 本 的 EXT 中 ， 即 使 手工 调用 了 aestroy() 函 数 ， 也 有 可 能 
出 现 对 应 DOM 没 有 被 正确 删除 ， 从 而 造成 DOM 泄 露 的 问题 。 

为 此 ，EXT 3.1 对 组 件 进行 了 大 量 的 重 构 ， 可 以 确保 无 论 在 ext-all 或 是 在 ext-core 中 都 可 以 正 
确 删 除 所 有 组 件 的 DOM3 引 用 ， 避 免 DOM 汇 圳 问题。 特别 是 在 IE 浏 览 器 下 ， 也 可 以 确保 将 所 有 孤 
立 的 DOM 节 点 都 删除 。 

2. 解决 JavaScript 引 人 擎 造成 的 内 存 泄露 

因为 JavaScript 引 擎 本 身 的 缺陷 导致 的 内 存 汇 露 ， 听 起 来 让 人 有 点 儿 吃 惊 ， 可 现实 是 目前 所 
有 版 本 的 IE 浏 览 器 (包括 下 8〉 都 不 能 很 好 地 处 理 JavaScript 中 长 期 驻 留 的 对 象 和 对 象 缓 存 ， 这 就 
导致 了 大 量 的 内 存 泄露 。 目 前 EXT 3.1 中 采用 的 解决 办 法 是 ， 当 用 户 使 用 IE 浏 览 器 时 主动 刷新 垃 
圾 收集 器 ， 从 而 对 无 用 的 对 象 内 存 进 行 回收 。 通 过 测试 ， 这 样 可 以 在 长 期 运行 的 页 面 应 用 下 获得 
50 倍 的 效率 提升 。 

14-20 展 示 了 Ext JS 官方 提供 的 一 份 3.0 版 本 与 3.1 版 本 长 期 打开 一 个 页 面 应 用 的 内 存 消 耗 
情况 。 





图 14-20 EXT3.0 与 EXT 3.1 内 存 消耗 比较 
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14.5.2 ”核心 组 件 优 化 


为 了 进一步 提升 框架 的 性 能 ，EXT 3.1 还 对 一 些 核心 组 件 进行 了 优化 ， 包 括 优 化 布局 、 重 构 
事件 管理 器 和 提高 Ext Core 灵 活性 。 

1. 优化 布局 

为 了 减少 复杂 布局 中 可 能 出 现 的 大 量 计 算 ，EXT 3.1 中 尽 可 能 避免 了 上 级 容器 重新 布局 时 所 
产生 的 计算 ， 比 如 EXT 3.1 中 直到 整体 布局 完成 之 后 才 会 计算 子 容器 的 大 小 。 这 样 就 可 以 大 大 减 
少 布局 中 所 需要 的 计算 ， 用 官方 的 说 法 就 是 :“Layout Storm”( 布 局 风暴 )。 

2. 重 构 事 件 管理 器 

EXT 3.1 对 事件 管理 器 (EventManager) 和 对 应 的 核心 适配器 (Adapter) 进行 了 全 面 的 代码 
重 构 ， 通 过 清除 重复 和 执行 效率 比较 低 的 代码 来 实现 性 能 优化 。 之 前 的 事件 缓存 机 制 也 经 过 了 全 
面 的 调整 ， 可 以 为 用 户 提供 更 快速 和 舒适 的 体验 。 

这 次 重 构 可 以 为 处 理 复杂 容器 的 场景 提升 一 个 数量 级 的 响应 速度 。 而 在 删除 元 素 或 组 件 时 ， 
EventManager 又 可 以 使 用 缓存 和 事件 延迟 的 方式 来 避免 外 来 的 操作 破坏 正在 运行 的 操作 。 

3. 提高 Ext Core 的 灵活 性 

在 EXT 3.0 分 拆 Ext Core 时 ，Ext Core 的 代码 中 包含 了 很 多 不 容易 被 外 部 扩展 的 私有 函数 。 为 
了 顺应 Ext 社 区 对 高 灵活 性 的 要 求 ，EXT 3.1 中 开放 了 很 多 函数 的 原型 。 并 且 现 在 Ext .each{) 函 
数 也 更 多 地 利用 了 底层 库 的 代码 ， 从 而 实现 了 很 多 常见 场景 下 的 性 能 提升 。 


14.5.3 ”分 组 表 头 


借助 分 组 表 头 〈Grouping GridView) 这 个 组 件 ， 我 们 可 以 实现 内 容 更 加 复杂 的 表格 组 件 ， 如 
图 14-21 上 所 示 。 


-苍生 衣 到 ， 二 吕 鬼才 4 了 ty 

Ext JS-1 x Ext JS-2.x Ext JS-3 x 
ext1t ext12 sxt21 exi22 exd31 ext32 
1 neme 1 male lrue mele true 
2 name 2 termale false femaie false 
3 name 3 malie featkse male false 
4 Name 4 temale talse femaie false 
5 name 5 male true maie true 

图 14-21 分 组 表 头 


为 了 实现 图 14-21 中 分 组 表 头 的 效果 ， 我 们 首先 要 在 页 面 中 引入 ColumnHeaderGroup.js 和 
ColumnHeaderGroup.css, 这 两 个 文件 就 放 在 EXT 3.1 发 布 包 的 examples/ux/ 目 录 下 , 代码 如 下 所 示 : 


<script type="text/javascript" src="../../ux/ColummHeaderGroup.js"></script> 


<link rel="stylesheet" type="text/css" href="../../Ux/css/ColumHeaderGroup.css" /> 
下 一 步 是 定义 分 组 表 头 的 配置 。 我 们 将 定义 一 个 两 层 的 表 头 ， 每 个 上 层 表 头 下 面包 含 两 列 ， 
代码 如 下 所 示 : 


Var row = [ 
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{header: 'Ext JS-1.x', colspan: 2, align: 
{header: 'Ext JS-2.X', colspan: 2, align: 
{header: 'Ext JS-3.x', colspan: 2, align: 


je 


var group 
rows: [row)] 


史 际 - 
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‘'center'}), 
‘center'), 
‘center’'} 


new Ext.ux.Szid.ColumnHeaderGroup (1{ 


接 下 来 只 要 向 GridaPanel 中 加 入 上 面 配 置 好 的 组 件 就 可 以 了 ， 代 码 如 下 所 示 : 


var grid = new Ext .grid.GridPanel(t{ 


‘male', ‘true'], 
'female', 'false’'], 
'male', 'false'], 
'female', ‘'false'], 
'male', 'true’'] 
oe 


title: 'Column Header Group', 
width: 620, 
autoHeight: true, 
store: new Ext .data.SimpleSstorel(t 
data: [ 
[i, ‘name 1', ‘male', ‘true’, 
[2, 'name 2', '‘'female', 'false', 
[3, '‘'name 3', ‘male', 'false', 
[4, 'name 4', 'female', 'false', 
[5, 'name 5', 'male', 'true', 
j3 
fields: ['extll', 'ext1l2', ‘ext21', 
此 天。 
columns: I 
{header: 'extll', dataIndex: 'ext1l1l')， 
{header: ‘ext12', dataIndex: 'ext12')， 
{header: '‘'ext21', dataIndex: 'ext21'}, 
{header: ‘ext22', dataIndex: ‘ext22'}), 
{header: ‘ext31', dataIndex: ‘ext31'}, 
{header: ‘ext32', dataIndex: 'ext32'} 
hs 
renderTo: 'grid'’, 
plugins: group 


£)? 


注意 , store 中 的 字段 设置 以 及 表格 中 每 一 列 的 对 应 关系 。 这 里 我 们 一 共 配置 了 6 列 , Column- 
HeaderGroup 插 件 会 根据 我 们 上 面 进行 的 配置 将 对 应 的 列 合并 在 分 组 表 头 中 。 


实例 代码 参考 14.core\ext31\1-groupGridView.html。 


14.5.4 ”锁定 列 


锁定 列 (Locking Grid Column) 的 功能 最 初 
是 在 EXT 1.x 中 实现 的 ， 进 入 EXT 2.x 时 代 后 ， 
为 列 锁定 功能 实现 过 于 复杂 而 被 去 掉 了 ， 但 是 社 ”， 
区 中 依然 有 人 实现 了 锁定 列 的 扩展 。 官 方 自然 不 : 
甘 落 后 ， 在 EXT 3.1 中 提供 了 锁定 列 的 功能 。 
在 锁定 一 列 之 后 ， 即 使 用 户 水 平 滚动 表格 ， 
被 锁定 的 表格 也 会 不 受 影响 地 一 直 显 示 在 表格 左 
侧 ， 如 图 14-22 所 示 。 
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从 图 14-22 中 可 以 看 到 ， 我 们 可 以 在 列 头 下 拉 菜 单 中 控制 对 特定 列 的 锁定 和 解锁 ， 被 锁定 的 
列 会 自动 显示 在 表格 左 侧 ， 从 而 不 会 受到 表格 水 平 滚 动 条 的 影响 。 

为 了 实现 这 样 一 个 拥有 锁定 某 一 列 功能 的 表格 ， 我 们 首先 要 在 页 面 中 引入 对 应 的 Locking- 
Gridview.js 和 LockingGridview.css， 代 码 如 下 所 示 ; 


<script type="text/javascript" src=",../../ux/LockingGridView.js"></script> 
<link rel="stylesheet" type="text/css" href="../../ux/css/LockingGridView.css" /> 


这 样 就 可 以 在 代码 中 使 用 Ext .ux .grid. LockingColummModel 和 Ext .ux.grid.Locking- 
Gridview 两 个 类 了 。 借 助 这 两 个 类 我 们 才能 在 表格 中 实现 锁定 列 的 功能 ， 并 且 这 两 个 列 必 须 结 
合 使 用 ， 否 则 会 在 运行 时 出 现 错误 ， 导 臻 整体 表格 无 法 正常 使 用 。 

为 GridPanel 添 加 锁定 列 功 能 的 配置 如 以 下 代码 所 示 : 


var grid = new Ext.grid.GridPanel{{ 
title: :Locking Grid', 


width: 400, 
height:; 200, 
store: new Ext.data.Simplestorel(t{ 
Gata: [ 
{1 name 4, maler, ‘true', 'male'， EP, 
[2, 'name 2', 'female', 'false', 'female', 'false'], 
[3, ‘name 3', ‘'male', 'false', 'male', 'false'], 
[4, 'name 4', 'female', 'false', 'female', 'false'], 
[5, ‘name 5', 'male'’, ‘true'’, 'male', Eress] 
]， 
fields: ['extll', ‘ext1l2', ‘ext21', ‘ext22', 'ext31', ‘ext32°'] 


}},，, 

colModel: new Ext.ux.grid.LockingColumnModelt{l[ 
{header: 'extll', datalIndex: '‘'ext11'}, 
{header: 'ext12', dataIndex: 'ext1l2: 
{header: 'ext21', dataIndex: ‘ext21' 
{header: ‘'ext22', dataIndex: 'ext22: 
{header: ‘ext31', dataIndex: '‘'ext31' 
{header: ‘ext32', dataIndex: 'ext32: 

] ) ， 

renderTo: 'grid', 

View: new Ext.ux.grid.LockingGridView!) 

}); 


如 果 希 望 将 某 些 列 在 表格 最 初 显 示 时 就 锁定 上 ， 可 以 直接 在 colMode1 的 配置 中 添加 1ockead: 
true 属 性 ， 这 一 列 就 会 在 初始 化 时 锁定 在 表格 左 侧 。 
实例 代码 参考 14.core\ext31\2-lockingGrid.html。 


14.5.5 ” 树 形 表 格 


树 形 表格 (TreeGrid) 同时 具备 树 形 的 分 级 结构 和 表格 的 丰富 内 容 。 第 5 章 已 经 介绍 了 以 树 形 
为 基础 实现 的 Ext .ux.tree.ColumnTree 扩 展 组 件 ， 现 在 EXT 3.1 又 我 们 带 来 了 基于 表格 的 树 形 
表格 ， 如 图 14-23 所 示 。 


Se 
” 3 
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担 天 衣 牛 
Tosk ~ Duration Assiged TO 
a AProlect Shopping 13.25 Taommy Maintr 
Housewmres 126 Tommry Mairtz 
a -Remodelng 12 Tommy Moirtr 
_] Pairt be oom 275 Tomrry Mont 
F] Decorate fving room 275 Tommy Maintz 
EI Fix hopts 075 Tommy Mairtz 
ERemttech Screen door 2 Tommy Mairtr 
时 Retie Kictyen 065 Tormmy Mairtz 

Prowct. Testigy 2 Core Teem 


图 14-23 ” 树 形 表格 


实际 上 树 形 表格 也 是 借助 Ext.tree.TreeLoader 实 现 加 载 树 形 数据 的 。 使 用 树 形 表格 之 前 ， 要 先 
在 页 面 中 引入 对 应 的 JavaScript 脚 本 和 CSS 样 式 表 ， 代 码 如 下 所 示 : 


<script type="text/javascript" src="../../ux/treegrid/TreeGridSorter.js"></script> 
<script type="text/javascript" src="../,.,/ux/treegrid/TreeGridColumResizer.,js"></script> 
<script type="text/javascript" src="../../ux/treegrid/TreeGridNodeUI.js"></script> 
<script type="text/javascript" src="../../ux/treegrid/TreeGridLoader.js"></script> 
<script type="text/javascript" src="../../ux/treegrid/TreeGridColumns.js"></script> 
<script type="text/javascript" src="../../ux/treegrid/TreeGrid.js"></script> 

<link rel="stylesheet" type="text/css" href="../../ux/treegrid/treegrid.css" rel= 
"stylesheet" /> 


下 面 直接 创建 树 形 表格 就 可 以 了 ， 详 细 配 置 代码 如 下 所 示 : 


Var tree = new Ext.ux.tree.TreeGridl(t 
title: 'Tree Grid', 
width: 500, 
height: 300, 
renderTo: 'grid', 
enableDD: true, 


colummns:[t{ 
header: ‘Task', 
dataIndex: 'task', 
width: 230 

Fd 
header: ‘Duration', 
width: 100, 
dataIndex: 'duration'， 
align: 'center' 

}o{ 
header: '‘'Assigned To', 
width: 150, 
dataIndex: 'user' 





]]， 


dataUrl: 'treegrid-data.json' 
})7 
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页 面 初始 化 后 , 树 形 表 格 会 去 treegrid-data.json 获 取 显 示 所 需 的 数据 , 我 们 将 其 中 一 段 内 容 截 
取出 来 放 在 下 面 : 


[{ 
task:'Project: Shopping', 
duration:13.25, 
user: 'Tommy Maintz', 
iconCls:'task-folder', 
expanded: true, 
children:[{ 
task: 'Housewares', 
duration:1.25, 
user: 'Tommy Maintz', 
iconCls:'task-folder', 
children: [{ 
task: 'Kitchen supplies '， 
duration:0.25, 
user: 'Tommy Maintz', 
leaf:true, 
iconCls: 'task' 
} 


从 上 述 代 码 中 可 以 看 到 ，task、duration、user 的 数据 会 直接 显示 在 表格 中 , 而 children 
和 expaned 两 个 属性 实现 了 树 形 结构 所 需 的 上 下 层 关系 ， 以 及 下 一 级 节点 是 否 默 认 展 开 的 配置 。 
我 们 可 以 把 这 些 数 据 看 做 在 每 个 节点 中 添加 了 额外 信息 的 树 形 数据 。 

实例 代码 参考 14.core\ext31\3-treeGrid.html。 

如 果 还 想 比较 一 下 树 形 表格 与 Ext.ux.tree.ColumnTree， 可 以 参考 5.13 节 。 


14.5.6 ” 竖 直 布局 |- 委 直 者 网 
坚 直 布 局 《VBox) 与 水 平 布 局 《HBox) 的 用 法 十 分 类 似 , 可 ， 
以 为 一 列 组 件 提供 统一 的 布局 控制 ， 如 图 14-24 所 示 。 
与 上 面 介绍 的 组 件 不 同 ， 竖 直 布 局 已 经 作为 EXT 3.1 默 认 发 布 “， 
包 的 一 部 分 了 ， 使 用 之 前 不 需要 额外 引入 其 他 脚本 和 样式 文件 。 Button 2 
为 实现 上 面 竖 直 布局 的 效果 ， 可 以 使 用 如 下 配置 代码 : 
Var panel = new Ext.Panell(t{ , Button 3 
title: 'VBox '， 
width: 200, 
height: 400, 
renderTo: ‘'grid', 
lJayout;: { 
type: 'vbox', 
padding:'5°', Button 4 


align: 'stretch' 
}5 
defaults: {margins:'0 0 5 0'}, 
items:[f{ 

xtype: ‘button’, 

text: ‘Button 1°', 


图 14-24 ” 竖 直 布局 
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flex:l1 


xtype: 'button', 
bats ‘Bubtor 2 
flex:1 


xtype: 'button', 
text: ‘Button 3', 
flex:1 


xtype: ‘button', 
text: ‘Button 4', 
flex:3, 
margins:'0! 
}] 
} 


与 布局 相关 的 配置 放 在 layout 属 性 中 ,我 们 用 type:'vbox' 指 定 当 前 的 Panel 使 用 竖 直 布局 
方式 。 可 以 为 其 中 每 个 组 件 设 置 flex 属 性 ，flex 属 性 越 大 ， 对 应 的 组 件 就 会 占据 越 大 空间 。 

垂直 布局 还 支持 使 用 align 属 性 对 布局 中 的 组 件 设置 统一 的 对 齐 方式 ， 比 如 上 例 中 将 align 
属性 设置 为 ' stretch'， 就 会 将 Panel 内 部 的 组 件 宽 度 都 自动 设置 为 充满 外 部 容器 的 大 小 ， 还 可 
以 将 align 属 性 设置 为 '1eft'、'center'、'stretchmax' 等 值 。 

实例 代码 参考 14.core\ext31\4-vbox.html。 

坚 直 布局 方式 与 EXT 3.x 之 前 的 水 平 布局 方式 十 分 相似 ， 如 果 想 了 解 水 平 布局 方式 可 以 参考 
1 


14.5.7 ”高 级 表格 查询 


高 级 表格 查询 (GridFiltering) 早 在 EXT 2.x 时 代 就 作为 第 三 方 扩展 组 件 出 现在 社区 中 了 ， 如 
今 官方 继续 将 此 功能 加 强 ， 并 随 EXT 3.1 版 本 一 起 发 布 。 
高 级 表格 查询 显示 效果 如 图 14-25 所 示 。 


Ce ri Compary Price Size Date VS 看 个 

1 分 上 Sort Ascending large D9 有 172007 1 ee 

6 和 Sort Descending extra larye 02701P008 0 

2 meciurm 08D12007 L 

3 型 Coumns large 08/03/2007 0 

4 ¥] Flters bie. M4/2008 1 
Americar B413 lL > Rl M4/2008 1 
BoeingC 75.43 1 /2008 1 

8 Caterpils 67 27 二 Neh PT i372007 

9 Citigroup 4937 large 11/2412007 1 

10 Ei duPo 40.48 extra |arge 05/092007 0 





Fvvann sh FR 





ty 
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图 14-25 ”高 级 表格 查询 
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使 用 高 级 表格 查询 功能 ， 首 先 要 在 页 面 中 引入 所 有 所 需 的 扩展 组 件 ， 如 下 面 代码 所 示 : 


<script type="text/javascript" src=" 


<script type="text/javascript" src=". 


<script type="text/javascript" src 
<script type="text/javascript" src=" 
<script type="text/javascript" src=". 
<script type="text/javascript" src=" 
<script type="text/javascript" src=" 
<script type="text/javascript" src=",. 
<SCript type="text/javascript" src=".. 


,./.. /ux/gridfilters/menu/RangeMenu.js"></script> 
./../ux/gridfilters/menu/ListMenu.js"></script> 


=".,../../ux/gridfilters/GridFilters.js"></script> 
../../ux/gridfilters/filter/Filter.js"></script> 
./../ux/gridfilters/filter/StringFilter.js"></script> 
../../ux/gridfilters/filter/DateFilter.js"></script> 
../,../ux/gridfilters/filter/ListFilter.js"></script> 
/../ux/gridfilters/filter/NumericFilter.js"></script> 
/../ux/gridfilters/filter/BooleanFilter.js'"></script> 


<link rel="stylesheet" type="text/css" href="*,./../ux/gridfilters/css/GridFilters.css" /> 
<link rel="stylesheet" type="text/css" href="../../ux/gridfilters/css/RangeMenu.css" /> 


下 面 可 以 为 表格 构建 高 级 查询 组 件 了 ， 


var filters 
filters: 

type: 

dataIndex: 

{ 

type: ‘string', 

datalIndex: 'company', 

disabled: true 

{ 

type: ‘numeric', 

dataIindex: 'price' 

{ 

type: 'date', 

dataIndex: 'date' 

{ 

EVDeOs 二 工人 人 

dataIndex: 'Size'， 

options: ['Smal1L'， 

phpMode: true 

{ 

type: ‘boolean', 

dataIndex: 'visible' 


[{ 
‘numeric'!, 

1iQ' 

a 


}， 


}， 


}， 


)} ， 


坷 
3 


‘medium', 


如 下 面 代 码 所 示 : 


new Ext.ux.grid.GridFilterst{t{ 


large', ‘'extra large'], 


下 面 将 filters 设 置 到 表格 中 ， 就 完成 了 高 级 表格 查询 功能 的 配置 ， 代 码 如 下 所 示 : 


var grid = new Ext.grid.GridPanel! 
width: 500， 
height: 300, 
border: true, 
store: store, 
renderTo: 'grid', 


{ 


colModel: new Ext.grid.ColumModel{! 


columns: [({ 
dataIndex: '‘'id', 
header: '‘'Id', 
filterable: true 
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dataIndex: ‘company', 
header: '‘'Company', 
id: ‘company', 
filter: { 
type: 'string' 
} 
类 。， 闷 
dataIndex: 'price', 
header: ‘Price', 
filter: { 
} 
ye A 
dataIndex: 'size', 
header: 'Size', 
Et 4 
type: 'l1ist', 
options: ['small’', ‘medium', ‘large’, 'extra large'] 
} 
Ex 省 
dataIndex: :date'， 
header: 'Date', 
renderer: Ext.util.Format.dateRenderer{'m/d/Y')}, 
filter: f{ 
} 
6 坟 
dataIndex: 'visible', 
header: 'Visible', 
filter: { 
} 


oly 

defaults: { 
sortable: true 

} 


loadGMask: true, 


plugins: 
autoExpandColumn: 
bbar: 


}) 


和 迪 ， 


[filters), 
Company ' ， 
new Ext.PagingToolbar({ 
store: store, 


pageSize: 50, 
plugins: 


[filters] 


注意 要 将 filters 同 时 设置 为 表格 和 PagingToolbar 的 插件 (plugin)， 这 样 才能 在 进行 分 页 时 
也 不 会 丢失 原来 设置 的 查询 信息 。 

实例 代码 参考 14.core\ext31\5-gridfiter.html。 
14.5.8 ” 自 定 义 编辑 器 


EXT 中 提供 的 自 定义 编辑 器 (Editor〉 可 以 实现 自由 编辑 任何 一 个 HTML 标 签 中 的 内 容 ， 我 
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ee 


标签 统一 注册 一 个 自 定义 编辑 器 进行 编辑 。 下面 我 textl ltextal 


们 就 在 页 面 中 设置 两 个 div 标 签 ， 并 在 用 户 使 用 鼠 

标 双 击 标签 时 显示 自 定义 编辑 器 对 标签 内 容 进行 oie l 

编辑 。 效 果 如 图 14-26 所 示 。 图 14-26 自 定义 编辑 器 
首先 要 在 页 面 上 添加 两 个 div 标 签 ， 代 码 如 下 所 示 : 


<div style="margin:50px; "> 
<div style="width:200px;float:left;">textl</div> 
<div style="width:200px;float:left;">text2</div> 
</div> 


然后 在 JavaScript 代 码 中 设置 监听 pody 部 分 的 鼠标 双击 事件 , 并 在 内 层 峰 套 的 aiv 标 签 中 触发 
鼠标 双击 事件 时 对 标签 内 容 进行 编辑 ， 代 码 如 下 所 示 ; 


Var editor = new Ext.Editorl(t 
shadow: false， 
completeOnEnter: true, 
cancelOnEsc: true, 
updateEl: true, 
ignoreNoChange: true, 
alignment: '1-1', 
field: { 

allowBlank: false, 
xtype:;: ‘textfield', 
width: 90, 
selectOnFocus: true 
} 
总 四 


们 完全 可 以 在 页 面 中 随便 写 几 个 标签 , 然后 为 这 些 | 加 





Ext .getBody{) .on{'dblclick', function{e, t)t 
editor.startEdit (t); 

EL A 
delegate: ‘div diyv' 


实例 代码 参考 14.corevext31\6-editorhtml。 


14.6 ”EXT 3.2 市 来 的 新 特性 


EXT 官 方 开发 团队 于 2010 年 3 月 30 日 发 布 了 EXT 3.2， 我 们 可 以 在 官方 网 站 上 免费 下 载 发 布 
包 。 据 官方 消息 ， 这 次 发 布 修复 了 180 多 个 bug， 并 在 整体 框架 级 别 都 实现 了 很 大 的 提升 。 

自从 EXT 1.0 发 布 以 来 ，EXT 每 次 发 布 的 新 版 本 都 会 为 我 们 带 来 绚丽 的 界面 效果 。 正 当 EXT 
一 步 步 走向 成 熟 之 时 , 我 们 不 禁 会 问 , EXT 所 创造 的 界面 奇迹 是 否 已 经 登峰造极 , 难以 超越 了 呢 ? 
EXT 3.2 的 发 布 彻底 打消 了 这 种 疑虑 ， 它 用 更 加 难以 置信 的 界面 效果 再 次 证 明了 自己 的 完美 。 下 
面 就 让 我 们 一 起 来 领略 一 下 EXT 3.2 带 来 的 新 功能 。 
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i 多 重 排 夺 ai Ratin Salnr 
在 之 前 的 版 本 中 ， 我 们 只 能 对 store 中 的 ne bs tp 
某 一 列 进行 排序 。EXT 3.2 冲 破 了 这 种 限制 , 现 。 nme 1 $10.000 10 
在 我 们 可 以 为 store 中 的 多 列 同时 指定 排序 规 ， nde 
则 了 ， 如 图 14-27 所 示 。 narme4 3 $44,444 40 
图 14-27 演 示 了 同时 对 表格 中 的 Rating 与 a 
Salary 两 列 进行 排序 ， 其 中 Rating 列 采用 倒序 排 
列 ，Salary 列 采用 正 序 排列 。 多 重 排序 功能 主要 图 14-27 多 重 排序 


通过 store 的 sort () 函数 实现 ， 具 体 用 法 如 下 列 代码 所 示 : 


store.sortt{[t{ 
fieldi rating", 
direction: 'DESC' 
3 
field: 'salary', 
direction: ‘DESC' 
jls 


上 面 的 代码 , 在 排序 时 间 时 指定 了 两 列 的 排序 方式 ，store 会 在 排序 时 优先 使 用 前 面 的 条 件 
进行 排序 ， 当 出 现 数值 相同 的 情况 时 ， 再 使 用 后 面 的 条 件 对 重复 的 数据 进行 处 理 。 


14.6.2 ”为 DataView 添加 动画 变换 效果 


DataView 可 以 实现 多 种 页 面 效果 的 描绘 ，EXT 3.2 带 来 的 Ext .ux.DataViewTransition 
可 以 为 DataView 提 供 动画 变换 效果 。 当 我 们 对 store 中 的 数据 进行 过 滤 时 ，Ext .ux.DataView- 
Transition 就 会 将 数据 过 滤 的 过 程 以 动画 形式 显现 出 来 ， 这 会 给 用 户 带 来 极 大 的 视觉 冲击 。 实 








例 效果 如 图 14-28 所 示 。 
入 DataYiew 容 细 动 乔 变 拆 颈 轩 
Filter phone price- a 
到 宙 
BlackBerry Curve BlackBerry Curve UD FEE Renoir 
8520 BlackBerry 二 8900 BlackBerr 
“5 目 
Motorols RAZR ?3 Motorols SLYR 
a L6i 
Nokia N85 


图 14-28 为 DataView 添 加 动画 变换 效果 
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使 用 Ext .ux.DataViewTransition 非 常 简单 , 只 要 将 创建 的 实例 设置 为 DataView 的 一 -个 
插件 就 可 以 了 ， 如 下 面 代 码 所 示 : 


plugins : [ 


new Ext ,ux.DatavVviewTransitiont{t 


duration 


idProperty: 


}) 
] ， 


14.6.3 


组 合 表单 控件 


EXT 3.2 中 新 增 的 组 合 表 单 控件 是 此 次 版 
本 发 布 的 另 一 大 亮点 , 它 解决 了 长 久 以 来 EXT 


3 550 ， 


“1G" 


Full Name: 


难以 实现 复杂 表单 布局 的 问题 , 现在 我 们 可 以 
很 轻松 地 在 表单 中 实现 多 种 多 样 的 布局 组 合 
了 ， 实 例 效 果 如 图 14-29 所 示 。 

14-29 中 实现 了 一 个 标签 对 应 三 个 文本 
框 的 效果 ， 而 且 这 三 个 文本 框 还 实现 了 横 排 。 
这 在 以 前 都 要 通过 手工 控制 分 列 布局 ， 而 且 要 编写 大 量 的 代码 。 如 果 采 用 EXT 3.2 的 组 合 表 单 控 
件 ， 只 需要 编写 如 下 代码 ， 就 可 以 实现 这 种 效果 。 


new Ext.form.FormPpanel (({ 


title: 
renderTo: 
width: 300, 
items: [{{ 
xtype: 


items: [ 


{xtype: 
{xtype: 
{xtype: 


] 
ls 
buttons: [{ 
text: 
Fi 4 
text: 
}] 
让 


组合 表单 控件 ' ， 
“docbody ' ， 


‘compositefield', 
fieldLabel: 


‘Full Name', 


‘textfield', 
‘textfielad’, 
‘textfield', 


'submit' 


'reset’ 


name: '‘'title’, 
name: 'firstName', 
name: 'lastName', 


失 台 表单 控 伯 ; 


SuUbrmit reset 


图 14-29 组 合 表 单 控件 


width: 40}), 
flex : 2} 


在 上 面 代 码 中 ， 我 们 直接 通过 xtype 指 定 了 compositefield， 可 以 像 使 用 其 他 普通 输入 控 
件 一 样 为 它 指定 标签 和 其 他 属性 , 组 合 输入 控件 中 的 子 控件 都 包含 在 items 中 , 默认 会 使 用 水 平 布 
局 处 理 这 些 子 控件 的 排列 ， 既 可 以 为 它们 指定 宽度 ， 也 可 以 使 用 flex 让 它们 自动 适应 容器 的 大 小 。 


14.6.4 


滑动 条 表单 控件 


顾名思义 ， 滑 动 条 表单 控件 就 是 可 以 将 滑动 条 作为 一 个 表单 组 件 放 在 表单 面板 中 进行 布局 ， 
实现 表单 数据 的 修改 、 读 取 与 提交 功能 ， 实 例 效 果 如 图 14-30 所 示 。 
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油 动 条 家 举 控 任 


Sound Effects: 
Ambient Sounds: ~ 
Interface Sounds: 


SuUbrm, } reset 


14.6 EXT 3.2 带 来 的 新 特性 


图 14-30 滑动 条 表单 控件 


为 使 用 滑动 条 表单 控件 ,首先 要 在 页 面 中 引入 SlideField.js 扩 展 , 然后 就 可 以 在 表单 面板 中 使 


用 了 ， 使 用 的 方式 与 其 他 普通 表单 控件 一 致 ， 实 例 代码 如 下 所 示 : 


Var form = new Ext.form.Formpanell(t 
width : 400, 
height: 160, 
title : ' 滑 动 条 表单 控件 ' ， 


bodySstyle 'padding: lO0px;', 
renderTo ‘container', 
defaultType: ‘sliderfield', 
buttonalign: 'left', 


defaults: { 
anchor: '95%', 
tipText: function (thumb)t{ 


return String{(thumb.value) + 


} 
FE 
items: [{ 
fieldLabel: 'Sound Effects', 
value: 50, 
name: 'fx'!' 


fieldLabel: 'Ambient Sounds', 
value: 80, 
name: ‘ambient'’ 


fieldLabel: 'Interface Sounds', 


value: 25, 
name: 'iface' 
}]， 
buttons: [{ 
text: ‘submit': 
jr 
text: ‘reset'’ 
}] 
FF 


14.6.5 ”为 滑动 条 指定 多 个 滑 块 


在 EXT 3.2 中 ， 我 们 可 以 在 同一 个 滑动 条 上 指定 多 个 滑 块 ， 让 用 户 可 以 同时 指定 多 个 数值 。 


显示 多 个 滑 块 的 显示 效果 如 图 14-31 所 示 。 
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图 14-31 为 滑动 条 指定 多 个 滑 块 


图 14-31 中 效果 的 实现 方式 十 分 简单 ,只 需要 在 创建 滑动 条 的 时 候 为 它 的 value 属 性 指定 一 个 
数组 就 可 以 了 ， 实 现代 码 如 下 所 示 : 


var horizontal = new Ext.Slideri{t 
renderTo: ‘multi-slider-horizontal', 
width i 214, 
minValue: 0, 
maxValue: 100, 
values : [10, 50, 90],， 
plugins : new Ext.slider.Tip!() 


Var vertical = new Ext.Slider(t{ 


renderTo : ‘multi~slider-vertical', 
vertical : true, 
height : 2141 


minValue: 0, 

maxValue: 100, 

values : [10, S50, 90], 

plugins : new Ext.slider.Tip!() 
El: 


Ext .get('btn')}.on{({'click', function(} { 
Ext .Msg.alert('info', horizontal.getValues() + '|' + vertical.getValues1()): 
}); 


在 上 面 代 码 中 ,我 们 创建 了 两 个 滑动 条 ， 它 们 分 别 用 水 平和 竖 直 两 种 演 染 方式 。 我们 使 用 数 
组 为 每 个 滑动 条 指定 了 三 个 数值 ， 这样 在 滑动 条 上 面 就 会 在 对 应 位 置 上 显示 三 个 滑 块 。 在 用 户 拖 
动 滑 块 进行 修改 之 后 , 还 可 以 使 用 getvalues () 函数 获得 修改 后 的 数值 , 返回 的 结果 将 是 一 个 字 
符 串 , 其 中 每 个 滑 块 对 应 的 数值 会 以 逗号 进行 分 隔 。 如 果 对 上 例 中 的 一 个 活动 条 调用 getvalues () 
水 数 ， 那 么 返回 的 结果 将 是 "10, 50, 90"。 


14.6.6 更 多 工具 条 插件 


EXT 3.2 提 供 了 更 多 与 工具 条 相关 的 插件 ， 可 以 大 大 增强 工具 条 的 实用 性 与 易 用 性 。 比 如 ， 
排序 插件 (reorderer) 支持 使 用 拖 暇 方式 对 工具 条 上 的 元 素 进行 排序 ， 拖 遇 插 件 (dropable) 可 以 
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将 页 面 上 的 其 他 内 容 拖 电 到 工具 条 上 ， 从 而 创建 新 的 工具 条 元 素 。 
排序 插件 的 效果 如 图 14-32 所 示 。 





’ ,> 
ne gv em tr rs 


图 14-32 ”工具 条 排序 插件 


如 果 希 望 使 用 排序 插件 ， 首 先 要 在 页 面 中 引入 Reordererjs 和 ToolbarReordererjs 两 个 文件 ， 之 
后 创建 一 个 ToolbarReorderer 实 例 ， 将 此 实例 设置 为 工具 条 的 插件 就 可 以 了 ， 实 现代 码 如 下 
所 示 : 


plugins : [ 
new Ext .ux.ToolbarReorderer{({ 
defaultReorderable: true 
}) 
] 


拖 电 插件 的 效果 如 图 14-33 所 示 。 





Drag teherg ， 二 BD VE FS oy Sh PR CE Cg PU A Et 
3m Co 入 amco | Altria Group 
[0.03 since Ly O03 3 01DSI2010 Lom 0. 3d since 
01/09/2010 一 O01/09/2010 
ican Express Microsoft Pfizer Inc 
lp 0.02 since Down U.54 sin:e pom 1.45 since 
01/0972010 Ql1/0972010 0 /09/2010 
Coca-Cola Home Depot. Procter & Ganble 
Up 0.58 since Up 1.{12 since Up 0.02 since 
; 01/09/2019 01/09/2010 01/09/2010 


图 14-33 ”工具 条 拖 电 插件 


如 果 想 使 用 拖 遇 插件 ， 首 先 要 在 页 面 中 引入 ToolbarDroppablejs， 之 后 创建 一 个 roolbar- 
Droppab1le 实 例 ， 并 实现 其 中 的 createItem( ) 函数 ， 这 个 函数 就 是 拖 电 成 功 后 用 于 创建 工具 
条 元 素 的 回调 函数 ， 最 后 将 此 实例 设置 为 工具 条 的 插件 就 可 以 了 ， 实 现代 码 如 下 所 示 : 


Var toolbar = new Ext .Toolbar(({ 
renderTo: ‘docbody', 
plugins : [ 
new Ex .ux,.ToolbarDroppablel{ 
createItem: function{(data) { 
Var record = data.draggedRecord; 


return new Ext,Buttonlt{ 





text : record.get('company'), 
iconCls: record.get('change') > 0 ? ‘money-up' : 'money-down', 
reorderable: true 
3 
} 
}) 
2 
items: ['Drag items here:'] 


FY3 


Download at Pin5i.Com 


http://52pdf.taobao.com 


428 第 14 章 EXT3x 中 的 新 特性 


实例 中 使 用 了 DataView 和 DragZone 来 实现 从 页 面 拖 提 内 容 到 工具 条 上 的 效果 , 可 以 参考 光盘 
中 的 实例 代码 。 


14.6.7 新 主题 Accessibility 


EXT 3.2 中 提供 了 用 于 支持 《美国 残疾 人 康复 法 案 》 第 508 节 的 新 主题 一 一 Accessibility， 这 
个 新 主题 在 深 色 背景 上 提供 了 更 大 的 文字 和 强烈 对 比 的 颜色 , 这 是 为 了 帮助 视 障 用 户 而 使 用 的 高 
对 比 度 方案 。 

如 果 想 使 用 这 个 新 主题 ， 可 以 直接 在 页 面 中 引入 xtheme-access.css， 新 主题 效果 如 图 14-34 
所 示 。 





14-34 新 主题 Accessibility 


14.7 ”小结 


本 章 主要 介绍 了 随 EXT 3.0 的 正式 发 布 而 来 的 诸多 功能 与 组 件 。 

Ext Core 抽 取 了 EXT 中 最 核心 的 功能 与 组 件 ， 其 中 剔除 了 原来 EXT 中 复杂 的 数据 操作 和 众多 
组 件 ， 我 们 完全 可 以 在 Ext Core 的 基础 上 直接 建立 完整 的 网 络 应 用 。 

Ext Direct 提 出 了 前 台 JavaScript 与 后 台 服 务 交 互 数据 的 标准 ， 借 助 不 同 平台 之 上 的 支持 库 ， 
我 们 可 以 让 同一 套 EXT 编 写 的 前 台 应 用 无 需 任何 修改 便 可 以 运行 在 所 有 平台 上 。 

EXT 3.0 中 提供 的 各 种 组 件 足 以 让 任何 人 眼前 一 亮 。 更 令 人 惊讶 的 是 ，RowEditor 或 者 任何 一 
个 分 页 小 组 件 都 可 以 直接 以 插件 的 形式 组 装 到 现 有 系统 中 ， 无 需 改 动 其 他 代码 。 

Flash 图 表 组 件 是 男 一 个 重大 突破 ，JavaScript 的 图 形 方面 一 直 受 限于 浏览 器 的 支持 ，Flash 图 
表 的 加 入 可 以 让 我 们 在 页 面 上 将 数据 以 华丽 图 表 的 形式 呈现 出 来 。 

还 介绍 了 EXT 3.1 版 本 中 对 整体 框架 性 能 方面 实现 的 巨大 提升 , 并 介绍 了 其 新 添加 的 新 组 件 ， 
包括 分 组 表 头 、 锁 定 列 、 树 形 表 格 、 竖 直 布 局 、 高 级 表格 查询 和 自 定义 编辑 器 。 

本 章 最 后 讲述 了 最 新 发 布 的 EXT 3.2 中 展示 的 最 新 组 件 ， 包 括 多 重 排序 功能 、DataView 中 的 
动画 效果 、 组 合 表单 控件 、 滑 动 条 表单 控件 、 在 活动 条 中 使 用 多 个 滑 块 、 两 个 工具 条 插件 和 新 主 
题 Accessibility 。 
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本 章 内 容 

口 介绍 用 户 扩 展 

0 编写 用 户 扩展 所 需 的 基础 知识 
D 编写 自 定义 用 户 扩展 

D 介绍 EXT 的 插件 体系 


EXT 本 身 拥有 极 强 的 扩展 性 ， 它 允许 用 户 在 其 基础 上 编写 更 适合 自身 业务 需要 的 自 定义 组 
件 ， 因 此 学 习 如 何 为 EXT 编 写 扩展 组 件 是 一 件 非常 有 意义 的 事情 。 我 们 可 以 将 实际 开发 中 常用 的 
功能 封装 为 自 定义 组 件 ， 下 次 再 遇 到 类 似 的 功能 时 就 可 以 直接 拿 来 使 用 ， 不 必 重 复 编写 代码 。 


15.1 介绍 用 户 扩展 


在 EXT 中 ， 用 户 扩展 组 件 被 称 为 User Extension， 默 认 放 置 在 Ext .ux 命名 空间 下 。EXT 的 官 
方 论坛 上 特地 为 用 户 扩展 设立 了 专门 的 版 块 , 在 其 中 可 以 找到 很 多 第 三 方 扩展 用 户 组 件 , 实 际 上， 
EXT 中 所 有 的 组 件 都 可 以 看 作 官方 提供 的 用 户 扩展 。 每 次 我 们 利用 EXT 中 的 继承 机 制 从 父 类 中 获 
得 一 切 默认 功能 ， 并 添加 上 定制 的 业务 功能 时 ， 就 已 经 是 在 实现 一 个 特定 的 用 户 扩展 组 件 了 。 

下 面 我 们 利用 官方 提供 的 searchField 来 带领 大 家 认识 一 下 用 户 扩展 组 件 User Extension ， 
SearchField.js 放 在 发 布 包 中 的 examples/ux 目 录 下 。 

我 们 需要 在 页 面 中 引入 SearchField.js， 实 例 代码 如 下 所 示 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htmld/strict.dtd"> 
<html> 


<head> 


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>ux</title> 

<link rel="stylesheet" type="text/css" href=",./.. /resources/css/ext-all.css" /> 
<script type="text/javascript" src="../.. /adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src=",./../ext-all. js"></script> 

<link rel="stylesheet" type="text/css" href=". /shared/examples.css" /> 


<SCript type="text/javascript" src="., /ux/SearchField.js"></script> 


<script type="text/javascript"> 15 
Ext .onReady (function() { 
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var data = I 
['nameli', ‘valuel'], 
['namel’, ‘'valuel’] 


Var Store = new Ext.data.ArrayStorel(t 
Proxy: new Ext.data.MemoryProxy (data), 
fields: ['name', ‘value'] 


Var field = new Ext.ux.form.SearchFieldl{{ 
store: store, 
renderTo: ‘container' 


jj 
</script> 
</head> 
<body> 
<script type="text/javascript" src="../shared/examples.js"></script> 
<div id="container"></div> 
</body> 
</html> 


在 使 用 Ext .ux .form.SearchField4 时 需要 绑 定 一 个 store， 这 样 当 用 户 输入 搜索 条 件 时 就 
会 调用 对 应 store 的 10ad() 函数， 传 入 用 户 输入 的 查询 条 件 进行 搜索 ， 如 图 15-1 所 示 。 

用 户 可 以 在 输入 框 中 输入 查询 条 件 , 然后 点 击 右 侧 的 查询 按钮 , 或 者 直接 点 击 回 车 就 可 以 执 
行 搜索 ， 如 图 15-2 所 示 。 


一 人 一 一 一 


只 


Se 





图 15-1 SearchField 的 初始 显示 效果 图 15-2 输入 查询 条 件 之 后 的 显示 效果 


SearchField 在 执行 搜索 之 后 就 会 显示 出 另外 一 个 按钮 , 点 击 这 个 按钮 就 可 以 清空 输入 框 中 
已 存在 的 数据 。 在 输入 框 中 不 存在 数据 时 ， 这 个 清空 按钮 又 会 被 隐藏 ， 这 对 于 用 户 体验 是 一 个 相 
当 不 错 的 例子 。 

现在 我 们 可 以 来 看 一 下 SearchField.js 中 的 代码 ， 了 解 一 下 这 个 用 户 扩展 组 件 是 如 何 实现 的 ， 
代码 如 下 所 示 : 


Ext .ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, { 
initComponent : function(t)({ 
Ext .ux.form.SearchField.superclass.initComponent .call {this):; 
this,on{'specialkey', function(f, e)t 
ifle.getKey!{) == eée.ENTER)T{ 
this.onTrigger2Click{); 
} 
}, this); 
}， 


validationEvent:false, 
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ValidateonBlur:false， 

triggerlClass: 'x-form-clear-trigger', 
trigger2Class: 'x-form-search-trigger', 
hideTriggerl:true, 

width:180, 

hasSearch : false, 

paramName : 'query', 


onTriggerlClick : function!()}i 
if(this.hasSearch){ 
this.el.dom.value = '';，; 
Var OO = {start: 0}; 
this.store.baseParams = this.store.baseParams || {}; 
this.store.baseParams [this.paramName] = ''; 
this.store.reload!{ {params:o0}); 
this.triggers[0] .hide(}); 
this.hasSearch = false; 


}, 


onTrigger2Click : function(}t{ 
Var V = this.getRawValue!(); 
Lf{tv Length < TIX 
this.onTriggerlClick!{); 
return; 
} 


var o = {start: 0}; 


this.store.baseParams = this.store.baseParams || {}; 
this.store.baseParams [this.paramName] = vV; 
this.store.reload( {params:o0}); . 


this.hasSearch = true; 
this.triggers[0] .show!(); 

}); | 

从 上 述 代 码 中 可 以 看 到 ，Ext .ux.form.SearchField 继 承 自 Ext.form.TwinTrigger- 
Field， 这 个 父 类 支持 在 数据 框 右 侧 设 定 两 个 功能 按钮 ， 然 后 分 别 使 用 onTrigger1lclick() 和 
onTrigger2Click() 两 个 尔 数 监 昕 两 个 功能 按钮 的 点 击 操作 。 

Ext .form.TwinTriggerField 中 的 onTrigger1lClick() 和 onTrigger2Click() 都 没有 具 
体 实现 ， 澳 要 在 实际 的 子 类 中 ， 比 如 我 们 现在 看 到 的 Ext .ux. form.SearchFiel1d， 对 两 个 回调 
闲 数 进行 实现 。 下 面 我 们 来 看 一 下 SearchField 是 如 何 通过 扩展 实现 具体 功能 的 。 

首先 在 SearchField 中 覆 靖 了 父 类 的 initcomponent() 函 数 ， 在 其 中 添加 了 对 回 车 键 的 支 
持 。 在 用 户 输入 完 查 询 信 息 后 按 下 回 车 时 ， 就 会 调用 searchField 中 的 onTrigger2Click () 
函数 。 

下 面 可 以 看 到 searchFielda 对 父 类 中 的 一 些 参数 进行 了 重 设 ， 比 较 重 要 的 参数 是 
hideTriggerl: true， 这 样 组 件 初始 化 时 就 会 隐藏 第 一 个 功能 按键 ， 也 就 形成 了 图 15-1 中 的 显 
示 效 果 。 在 用 户 点 击 查询 按钮 或 敲 击 回 车 键 时 ， 就 会 执行 onTrigger2click () 中 的 功能 。 这 一 
步 又 会 判断 当前 的 查询 信息 是 耕 为 空 ， 如 果 为 空 就 会 调用 onTriggericlick() 执 行 清空 操作 ， 
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也 就 是 说 SearchField 会 自动 判断 是 否 拥 有 查询 条 件 ， 选 择 执 行 查询 或 是 清空 操作 。 

在 执行 查询 功能 时 ， 就 会 将 用 户 输入 的 信息 作为 参数 传递 给 已 绑 定 的 store， 并 调用 对 应 的 
lo0ad() 了 函数， 然后 还 要 将 清空 按钮 显示 出 来 。 

在 执行 清空 操作 时 ， 首 先 会 清空 输入 杠 中 的 数据 ， 然 后 隐藏 searchField 的 清空 按钮 ， 一 切 
就 是 这 么 简单 。 

至 此 为 止 , 我们 已 经 实际 看 到 了 一 个 用 户 扩 展 是 如 何 编写 的 ， 并 将 整个 用 户 扩展 实际 应 用 起 
来 。 从 这 个 例子 中 可 以 看 到 ， 当 我 们 需要 实现 一 个 搜索 输入 框 时 并 不 需要 实现 所 有 功能 操作 ， 只 
需要 通过 继承 Ext . form.TwinTriggerField 效 得 基本 功能 ， 并 覆盖 需要 扩展 的 部 分 功能 ， 提 供 
自 定义 实现 。 这 样 无疑 可 以 大 大 降低 开发 工作 量 ， 同 时 又 实现 了 很 好 的 封装 ， 保 证 在 之 后 使 用 类 
似 功 能 时 可 以 直接 调用 。 

实际 上 , 在 我 们 使 用 SearchField 的 过 程 中 也 可 以 了 解 到 , 所 谓 的 用 户 扩展 组 件 User Extension 
与 其 他 官方 提供 的 组 件 并 没有 任何 不 同 ， 创 建 方式 、 参 数 的 配置 方式 ， 以 及 方法 的 调用 方式 都 是 
完全 相同 的 。 对 开发 者 和 应 用 者 来 说 ， 所 以 实现 用 户 扩展 组 件 只 会 给 我 们 带 来 极 大 的 便利 。 


15.2 ”编写 用 户 扩 展 所 需 的 基础 知识 


在 我 们 实际 动手 编写 自己 定制 的 用 户 扩展 之 前 ， 首 先 要 了 解 一 些 预 备 知 识 。 实 际 上 ， 也 只 有 
了 解 这 些 知识 之 后 才能 开始 了 解 这 些 用 户 扩 展 组 件 时 如 何 运作 的 , 同时 对 EXT 中 的 组 件 结构 有 了 
更 如 深入 的 了 解 ， 有 助 于 我 们 对 EXT 进 行 更 深 一 步 的 理解 和 研究 。 


15.2.1 继承 模型 


EXT 中 的 用 户 扩展 组 件 ， 是 建立 在 面向 对 象 开 发 的 基础 上 的 ， 所 有 的 用 户 扩展 都 是 基于 EXT 
官方 已 经 封装 好 的 父 类 进行 的 功能 扩展 , 因此 我 们 首先 需要 了 解 的 就 是 如 何在 EXT 中 实现 面向 对 
象 编程 。 

EXT 中 利用 Ext .extend() 函数 来 实现 类 之 间 的 继承 操作 。 

在 研究 这 个 基础 函数 之 前 , 我 们 还 需要 复习 一 下 JavaScript 的 基本 知识 : prototype、constructor 
和 closure。 

prototype 是 在 JavaScript 中 实现 继承 的 基础 ， 如 果 我 们 想 在 JavaScript 中 实现 继承 关系 ， 可 以 
使 用 如 下 代码 : 

RectAngle = function(width,height) { 

this.width = width:; 


this.height = height; 
} 


RectAngle.prototype.area = Eunction() { 
return this.width * this.height; 
} 


这 段 代码 来 自 《JavaScript 权 威 指南 》， 实 现 的 功能 其 实 很 简单 ， 它 定义 了 一 个 “矩形 ”的 构 
造 函 数 ， 有 长 和 宽 两 个 参数 。 然 后 在 Rectangle 的 prototype 属 性 中 添加 一 个 计算 面积 的 函数 
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area()。 这 样 每 次 在 执行 var rect = new Rectangle() ;创建 新 的 矩形 对 象 后 ， 都 可 以 对 rect 
对 象 调用 area () 参 数 了 ， 因 为 rect 对 象 从 Rectangle 的 prototype 里 面 继 承 了 area() 函数 。 

这 就 是 JavaScript 基 于 原型 继承 的 简单 理解 。 

constructor 是 JavaScript 中 定义 的 对 象 的 构造 函数 ,因为 每 个 函数 都 会 有 一 个 prototype 属 性 ， 
构造 函数 也 是 一 个 函数 ， 因 此 构造 函数 也 拥有 prototype 属 性 。 

prototype 属 性 在 定义 函数 时 就 会 自动 创建 并 初始 化 ， 也 就 是 说 ， 在 执行 Rectangle = 
function(width，height){} 时 ，Rectangle 中 的 prototype 属 性 就 已 经 被 创建 了 ， 这 时 
prototype 中 只 包含 一 个 树 形 ， 它 就 是 constructor， 这 个 constructor 指 向 Rectangle 函 数 本 身 。 
这 样 就 形成 了 一 个 闭环 ， 可 以 试验 一 下 这 种 调用 方式 : 

RectAngle.prototype.constructor.prototype.constructor... 

通过 上 面 代码 这 种 调用 方式 , 告诉 我 们 可 以 通过 不 同 的 途径 米 调 用 Rectangle 函 数 本 身 以 及 
函数 中 的 prototype 属 性 。 

对 每 个 Rectangle 创 建 的 对 象 实例 来 说 ， 例 如 var rect = new RectAngle(10，10);， 
rect .prototype 属 性 都 会 指向 构造 函数 的 prototype， 也 就 是 会 指向 Rectangle 的 prototype 
属性 ， 因 此 Rectangle 的 所 有 实例 对 象 都 会 共享 同一 份 Rectangle.prototype 属 性 。 

这 样 一 来 就 不 需要 分 配 多 余 的 内 存 给 每 个 对 象 实例 来 存储 prototype 属 性 ， 从 而 实现 了 
JavaScript 的 继承 功能 。 

closure 含 义 是 闭 包 ,这 是 一 种 动态 语言 大 多 支持 的 简易 功能 ， 使 用 闭 包 我 们 可 以 更 容易 地 实 
现 各 种 匿名 内 部 类 。 

Rectangle = function(width, height) { 

this.getWidth = function{) { 
return width; 
< = function() { 
return height 


37 
} 


RectAngle.prototype.area = function() { 
return this.getWidth() * this.getHeight{); 

} 

这 段 代 码 在 构造 函数 中 使 用 闭 包 为 Rectangle 对 象 定义 了 getwidth() 和 getHeight () 两 个 
函数 。 这 两 个 函数 都 是 在 构造 对 象 实例 时 创建 的 ， 因 此 不 会 通过 prototype 实 现 共享 ， 也 就 是 说 
每 个 对 象 实例 都 会 分 配 不 同 的 内 存 存 储 这 些 函 数 , 也 正 因 为 如 此 不 会 出 现 各 个 实例 之 间 的 数据 冲 
突 ， 实 际 使 用 时 可 以 根据 现实 需要 进行 选择 。 

下 面 我 们 可 以 来 分 析 Ext .extend() 的 具体 实现 了 ， 首 先 还 是 先 来 查看 一 下 通常 情况 下 如 何 
实现 JavaScript 继 承 ， 代 码 如 下 所 示 : 


RectAngle = function(w, h) { 


this.w = w: 
this.h = h; 
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} 


RectAngle.prototype.area = function() { 
return this.w * this.,h; 
} 


然后 我 们 继承 Rectangle， 实 现 功 能 扩展 ， 代 码 如 下 所 示 : 


ColoredRectAngle = function(color, w, h) 1 
RectAngle.call (this, w, h); 
this.c = color; 


} 
下 面 我 们 需要 将 Rectangle 中 定义 的 area() 函数 赋予 ColorRectAangle， 代 码 如 下 所 示 : 


ColoredRectAngle.prototype = new Rectanglel():; 


上 述 代码 中 首先 创建 一 个 Rectangle 的 实例 ， 然 后 将 这 个 实例 设置 给 coloreaRectangle 的 
prototype 属 性 ， 这 样 ColoredRectangle 的 实例 就 可 以 顺藤摸瓜 ， 沿 着 prototype 获 得 
RectAngle: prototype 中 的 area() 函 数 ， 从 而 实现 了 继承 。 

因为 我 们 在 创建 Rectangle 的 实例 时 没有 传 入 任何 参数 ， 所 以 在 创建 的 RectaAngle 对 象 实例 
中 会 多 出 两 个 值 为 空 的 变量 , w 和 h。 很 显然 在 继承 过 程 中 这 两 个 参数 是 元 余 的 , 我 们 需要 手工 删 
除 这 两 个 变量 才能 完成 整个 继承 过 程 ， 如 以 下 代码 所 示 : 


delete ColoredRectAngle.prototype.w; 
delete ColoredRectAngle.prototype.h; 


至 此 为 止 ， 还 需要 解决 一 个 问题 ，coloredRectangle 的 constructor 指 向 是 错误 的 。 

如 果 没 有 使 用 coloredRectangle.prototpe = new Rectangle{) ;这 一 步 操作 ，coloreda- 
Rectangle.prototype 的 指向 应 该 是 JavaScript 自 动 创 建 出 的 prototype， 这 个 prototype 中 包 
含 了 一 个 指向 ColoredRectangle 的 constructor。 

但 是 我 们 在 创建 coloredRectangle 之 后 执行 了 ColoredRectAngle.prototype = new 
Rectangle();。 如 果 现在 来 访问 coloredRect .prototype.constructor， 那 么 根据 自动 查找 
机 制 ， 就 会 找到 Rectangle 实 例 中 的 prototype.constructor， 也 就 是 Rectangle。 这 对 于 
ColoredRectangle 本 身 是 不 合 时 宣 的 ， 如 果 我 们 运行 如 下 代码 ; 


Var coloredRectAngle = new ColoredRectAngle{'‘'red’, 10, 10); 
Alert (coloredRectAngle.constructor); 


得 到 的 却 是 父 类 Rectangle 的 构造 函数 ， 这 就 导致 ColoredRectangle 的 对 象 实例 无 法 正确 使 用 
自己 的 构造 函数 ， 因 此 需要 手工 把 coloredRectangle.prototype 设 置 成 正确 的 引用 ， 于 是 最 
后 需要 调用 如 下 代码 : 

ColoredRectAngle.prototype.constructor = ColoredRectAngle:; 

至 此 ， 我 们 完成 了 完整 的 JavaScript 继 承 功能 。 

下 面 可 以 来 分 析 一 下 EXT 中 是 如 何 实现 上 述 的 继承 功能 的 ，Ext .extend() 的 完整 代码 如 下 
所 示 : 


extend : function()t 
//! inline overrides 
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var io = Eunction(o){ 
for(var m in O){ 
this[m)] = oflm]; 
} 
Rj 
var oc = Object .prototype.constructor; 


return function{sb, sp, overrides}){ 
if (Ext.isObject{(sp))t 
overrides = sp; 
sp = sb; 
sb = overrides.constructor != oc ? overrides.constructor : function() 
{sp.apply (this, arguments);}; 


Var F = function(){}, 
sbp, 
spp = Sp.prototype; 


F.prototype = SPP: 

sbp = sb.prototype = new F(); 

sbp.constructor=sb; 

sb.superclass=spp; 

if(spp.constructor == oc)}t{ 
spp.constructor=sp; 

} 

sb.override = function(o)t 
Ext .override(sb, o0); 


sbp.,superclass = sbp.supr = (function(){ 
return spp; 
})3 
sbp.override = io; 
Ext .overridelsb, overrides).; 
sb.extend = function{o) {Ext.extend(sb, o0);};: 
return sb; 
}; 
本 


首先 这 是 一 个 自动 执行 的 函数 ， 它 会 在 EXT 被 加 载 的 同时 执行 ， 在 其 执行 过 程 中 会 使 用 闭 包 
构造 出 继承 所 需 的 局 部 变量 ， 比 如 var io 用 来 实现 对 象 之 间 的 属性 复制 功能 ， 而 oc 用 来 保存 
JavaScript 中 默认 父 类 object 的 构造 函数 。 

Ext .extend() 函数 实际 上 支持 3 个 参数 。sb 表 示 等 待 继承 的 子 类 ，sp 表 示 超 类 ，overriaes 
继承 过 程 中 需要 才 盖 的 属性 与 函数 。 

不 过 我 们 也 经 常 在 EXT 的 源 代码 中 看 到 对 Ext.extend() 只 使 用 两 个 参数 的 调用 方式 , 这 时 就 需 
要 进行 一 个 转换 步骤 : 

if (Ext .isObiject (sp)})t{ 

overrides = sp:; 
sp = sb; 


sb = overrides .constructor != oc ? overrides .constructor : function{) {sp.apply{this, arguments);}; 
} 
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当 只 使 用 两 个 参数 时 ， 这 里 的 if () 判断 就 会 为 true 并 执行 转换 功能 。 首 先 将 sp 也 就 是 第 二 
个 参数 赋值 给 overrides, 然后 将 sb 也 就 是 第 一 个 参数 赋值 给 sp, 最 后 判 汤 overrides 中 是 否 设 
置 了 constructor。 如 果 设 置 了 ,就 用 这 个 属性 值 作为 子 类 的 构造 函数 ， 否 则 使 用 自动 创建 的 构 
造 函 数 ， 自 动 创建 的 构造 函数 会 将 传 入 的 参数 值 复制 到 当前 对 象 中 。 

下 面 要 实现 从 父 类 的 prototype 中 复制 属性 到 子 类 中 ，EXT 中 使 用 的 实现 代码 如 下 所 示 : 


var F = function(){}, 
sbp, 
spp = sp.prototype; 


F.prototype = spp; 
sbp = sb.prototype = new F(}; 
sbp.constructor=sb,; 


首先 定义 了 空 的 函数 F， 然 后 将 超 类 sp 的 prototype 赋 值 给 spp。 

下 一 步 将 spp， 即 超 类 sp 的 prototype 赋 值 给 F.prototype， 这 样 6 就 拥有 了 超 类 的 
prototype。 

然后 执行 new F() 生 成 对 应 的 实例 ， 因 为 F 本 身 是 空 的 ， 所 以 在 创建 实例 时 不 会 产生 任何 额 
外 元 余 的 变量 ， 这 也 就 省 去 了 上 面 我 们 删除 无 用 属性 变量 的 步骤 ， 而 F 的 prototype 属 性 来 自 于 
超 类 ， 所 以 不 会 影响 整个 继承 过 程 。 

在 sb.prototype 承 接 了 F 创 建 出 的 实例 对 象 之 后 ， 也 就 完成 了 子 类 对 父 类 的 继承 ， 最 后 使 
用 sbp .constructor = sb; 将 子 类 的 构造 函数 重新 指向 到 子 类 即 可 。 

剩 下 的 代码 都 用 来 为 生成 的 子 类 设置 一 些 附 加 的 功能 函数 , 对 继承 功能 不 再 有 影响 了 。 自 此 ， 
我 们 便 获 得 了 通用 的 JavaScript 继 承 功 能 ， 之 后 只 需要 直接 使 用 即 可 。 比 如 上 面 演示 的 普通 的 
JavaScript 继 承 实 例 可 以 写成 如 下 形式 : 


ColoredRectAngle = Ext .extend{RectAngle, {}); 


15.2.2 了 解 component 的 生命 周期 


EXT 中 的 所 有 组 件 都 是 继承 自 Ext .component， 所 以 我 们 需要 掌握 Ext .Component 的 几 个 
重要 生命 周期 才能 准确 找到 扩展 点 ， 实 现 对 这 类 组 件 的 扩展 。 

当 我 们 创建 一 个 Ext .Component 组 件 时 ， 会 按照 以 下 顺序 对 组 件 进行 初始 化 。 

D 调用 Ext .Apply () 复制 参数 。 

调用 adadagvents () 添 加 事件 。 

口 调用 Ext .ComponentMgr .register(this) 注 册 当 前 组 件 。 

调用 initcomponent () 初 始 化 组 件 。 

D 调用 initPlugin() 初 始 化 插件 。 

口 调用 initstate() 初始 化 状态 。 

口 调用 applyToMarkup () 或 render () 进 行 组 件 泻 染 。 

这 里 的 initcomponent () 就 留 给 我 们 的 扩展 点 。 一 般 情况 下 在 继承 了 基于 Ext .Component 
组 件 之 后 ， 对 组 件 的 初始 化 操作 都 可 以 直接 写 在 initcomponent () 里 ， 它 会 在 组 件 初始 化 前 被 
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自动 调用 。 如 果 和 希望 修改 其 他 功能 ， 也 可 以 根据 上 述 介 绍 的 功能 函数 进行 修改 。 

因此 ， 当 为 Ext .component 及 其 子 类 编写 自 定 义 扩展 时 ， 就 需要 遵守 上 述 Component 的 生命 
周期 ， 在 对 应 的 初始 化 状态 重 写 扩展 功能 。 最 常见 的 操作 是 覆盖 initcomponent () 函数 进行 组 
件 初始 化 ， 而 不 是 直接 重 写 constructor 进 行 组 件 的 初始 化 工作 。 

下 面 我 们 会 依照 Ext.grid.GridPanel 扩 展 出 一 个 更 易 用 的 表格 控件 , 期 间 就 会 利用 到 上 面 


讨论 到 的 组 件 生命 周期 。 


15.3 ”编写 自 定义 用 户 扩展 


我 们 的 目标 是 使 用 最 少 的 代码 实现 一 个 功能 完整 的 表格 控件 , 可 以 想象 一 下 使 用 通常 的 方式 
创建 一 个 GridaPane1 至 少 需 要 哪些 步骤 。 

D 首先 设置 store 获 得 数据 。 

D 然后 设置 columns 设 置 表格 中 显示 的 数据 。 

口 最 后 加 载 数据 显示 表格 。 

现在 我 们 希望 将 这 3 个 步骤 合并 为 统一 的 配置 ， 代 码 如 下 所 示 : 


var grid = new Ext.ux.MainGrialt 
data: data, 
fields: ['name', 'value'], 
renderTo: 'container'’ 

FF}:} 


为 了 实现 这 种 效果 ， 我们 要 扩展 Ext .grid.GridpPanel 实 现 自 定义 组 件 ， 让 自 定义 组 件 可 以 
通过 上 述 配置 的 最 小 配置 生成 完整 的 GridPane1l 所 需要 的 全 部 配置 ， 如 下 面 代码 所 示 : 


Ext .ux.MainGrid = Ext.extend(Ext.grid.Gridapanel，({ 
initComponent: function() { 


this.autoHeight = true; 


this.tbar = [{ 

text: 'create' 
ji 六 

text: ‘edit' 
3 

text: 'remove' 
Bs 


this.store = new Ext.data.ArrayStorel(l{ 
autoLoad: true, 
Proxy: new Ext.data.MemoryProxy (this,.data), 
fields: this.fields 

EY) 


this.columns = []; 
for (var i = 0; i < this.fields,.length; i++) { 
this.colums .push({ 
header: this.fields[i], 
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dataIndex: this.fields[i] 
$2 
} 


Ext .ux.MainGrid.superclass.initComponent .call (this),; 
} 
和 


从 代码 中 可 知 ， 我 们 仅仅 重 写 了 initcomponent () 函数 ， 在 组 件 初 始 化 之 前 对 必须 的 参数 
设置 ， 通 过 上 段 代 码 中 设置 的 aata 和 fields 两 个 参数 ， 为 表格 生成 了 store 和 columns 参 数 ， 并 
将 store 设 置 为 autoLoad:true， 使 其 可 以 自动 加 载 数据 ， 最 终 我 们 可 以 直接 创建 Maincrid， 
将 我 们 扩展 的 表格 显示 在 页 面 上 。 

现在 我 们 知道 编写 自 定义 用 户 扩展 组 件 是 一 件 多 么 简单 多 么 慨 意 的 事情 了 ,我 们 需要 任何 功 
能 都 可 以 直接 通过 扩展 已 有 的 组 件 实现 出 来 ,而 且 这 些 功能 已 经 封装 在 自 定义 组 件 中 ,其 后 我 们 
就 可 以 直接 调用 它们 ， 无 需 重 复 这 些 工 作 了 。 


15.4 介绍 EXT 的 插件 体系 


在 EXT 中 ， 用 户 扩展 〈User Extension) 和 插件 (Plugin) 两 种 机 制 为 我 们 提供 了 对 原 有 功能 
的 扩充 途径 。 与 用 户 扩 展 不 同 的 时 ， 插 件 提供 了 更 加 灵活 的 功能 扩展 方式 ， 有 效 地 利用 插件 更 利 
于 把 功能 封装 成 一 个 一 个 的 模块 。 

我 们 重新 审视 一 下 Ext .component 组 件 初始 化 时 调用 的 函数 ， 如 下 所 述 。 

口 调用 Ext .Apply() 复制 参数 。 

0 调用 addEvents () 添加 事件 。 

口 调用 Ext .ComponentMgr .register{this) 注册 当前 组 件 。 

口 调用 initcomponent () 初 始 化 组 件 。 

口 调用 initPlugin() 初 始 化 插件 。 

Q 调用 initstate() 初 始 化 状态 。 

D 调用 applyToMarkup() 或 render () 进 行 组 件 泻 染 。 

可 以 看 到 其 中 有 一 项 initPlugin()， 这 一 步 会 判断 当前 组 件 是 否 设置 了 插件 。 如 果 存 在 插 
件 就 会 对 这 些 插件 进行 初始 化 操作 ， 一 般 都 是 直接 调用 插件 的 init() 函 数 ， 将 插件 的 某 些 功能 
函数 绑 定 在 当前 组 件 的 一 些 事件 中 。 当 特定 事件 被 触发 时 就 会 激活 相应 的 监听 函数 ， 从 而 实现 特 
定 的 功能 。 

下 面 是 Ext . Component 中 用 于 初始 化 插件 的 代码 ; 


initPlugin : function(Dp)({ 

if(p.ptype && !Ext.isFunction(p.init))t{ 
Pp = Ext.ComponentMgr.createPlugin(p); 

}else if{Ext.isSstring (p}){ 
p= Ext.ComponentMgr .createPluginl(t{ 

ptype: P 

})3 

} 

p-.init (this); 
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return p; 
) ， 


从 上 述 代 码 中 可 以 看 到 ， 所 谓 的 插件 其 实 只 是 一 个 必须 拥有 ;init () 函数 的 对 象 而 已 。 它 没 
有 必要 继承 什么 超 类 ， 对 其 结构 也 没有 什么 特殊 的 要 求 ， 只 是 要 求 对 象 中 包含 一 个 init () 就行 
过 党 

假设 我 们 希望 为 GridPanel 添 加 一 个 可 修改 每 页 显示 记录 数 的 扩展 ， 实 例 代 码 如 下 所 示 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.o0rg/TR/html4/strict.dtd"> 
<html> 
<head> 

<meta http-~equiv="Content-Type'" content="text/html; charset=iso-8859-1"> 
<title>ux</title> 
<link rel="stylesheet" type='"text/css" href="../../resources/css/ext-all.css" /> 
<script type="text/javascript" Src="../../adapter/ext/ext-base.js"></script> 
<script type="text/javascript" SIC=",../../ext-all-debug.js"></script> 
<link rel="stylesheet" type="text/css" href="../shared/examples.css" /> 


<sctript type="text/javascript" src="../ux/PagingMemoryProxy.js"></script> 
<script type="text/javascript" src="PageSizepPlugin.js"></script> 
<script type="text/javascript"> 
Ext .onReady (function() ({ 
var data = [ 
['namel', 'valuel'], 
['name2', '‘'value2'], 
['name3', ‘value3'], 
['name4', ‘value4'], 


['nameS5', ‘valueS'], 
['name6', 'value6'], 
['name7', 'value7'], 
['name8', 'value8'], 
['name9', 'value9'], 
ll'namel0', ‘valuel10'], 
['namell', ‘valuell'], 
['namel2', ‘'valuel12'], 
['namel3', 'valuel3'], 
['namel14', 'valuel4'], 
['namel1l5', 'valueli5'], 
['name16', ‘value16'], 
['namel17', ‘valuel17'], 
['namel8', ‘valuel18'], 
['namel9', ‘'valuel9'], 
['name20', 'value20'] 


Var store = new Ext.data.ArrayStorel(t 
Proxy: new Ext.ux.data.PagingMemoryProxy (data), 
fields: ['name', '‘'value'] 

pe 


Var grid = new Ext.grid.GridPanel{{ 
autoHeight: true, 
store; store, 
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columns: [{ 
header: ‘name', 
dataIndex: ‘name' 

Fa { 
header: 'value', 
dataindex: 'value' 

})， 

bbar: new Ext.PagingToolbar({ 
store:; store, 
pageSize: 10, 
Plugins: new Ext .ux.PageSizePlugint{) 

1 

renderTo: 'container' 

Es 


store.load({params: {start: 0, limit: 10}}); 
3 
</script> 
</head> 
<body> 
<script type="text/javascript" src="../shared/examples.js"></script> 
<div id="container"></div> 
</body> 
</html> 
需要 注意 的 是 bbar 中 的 plugins 参 数 ， 我 们 为 其 设置 了 new Ext .ux. PageSizepluginl()， 
这 样 在 实际 使 用 时 ，init () 函数 将 自身 的 onInitView() 函数 绑 定 到 PagingToolbar 的 rendaer 
事件 中 。 在 PagingToolbar 演 染 完 毕 后 ， 就 会 触发 render 事 件 ，onInitView() 会 被 用 来 向 分 页 
工具 条 中 添加 选择 分 页 数目 的 下 拉 框 。 
PageSizePlugin 的 构造 函数 中 会 预先 创建 好  ,。 ei 
一 个 下 拉 框 ComboBox， 并 为 其 定义 好 一 系列 可 供 选 .name 
择 分 页 数目 ， 默 认为 10、20、30、50 和 100。 Es 
当 用 户 使 用 下 拉 框 ComboBox 来 选择 分 页 数目 nmes 
时 ， 就 会 触发 对 应 的 select 事 件 ， 与 之 对 应 的 mmes 
onPageSizeChanged() 函数 会 被 调用 。 它 将 通过 
ComboBox 获得 用 户 选 择 的 分 页 数目 ， 刷 新 nmee 
PagingToolbar 的 pageSize 属 性。 最 后 调用 补 ” 
doLoad{) 函数 重新 加 载 PagingToolbar 和 和 当前 表格 a * age 1 Of2 ,¥ | 2 +0| v 


的 数据 。 mw 
最 终 页 面 效 果 如 图 15-3 所 示 。 3 
插件 的 价值 在 于 无 需 更 改 原 有 组 件 , 完全 通过 模 


块 化 的 方式 为 原 有 组 件 提供 额外 的 功能 。 从 这 方面 

看 ,用 户 扩展 拥有 更 强 的 封装 性 ， 使 用 时 可 以 迅速 创 。 图 15-3 可 配置 列表 每 页 显示 数目 的 插件 
建 出 封装 完全 的 既 有 功能 ， 而 插件 则 更 注重 通用 性 。 可 以 看 到 一 个 分 页 插件 完全 可 以 组 装 在 任何 
一 个 表格 中 , 无论 这 个 表格 是 普通 Griapanel 还 是 EditorGridpPanel, 甚至 是 GroupingGridPanel 
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都 可 以 使 用 同样 的 插件 ， 这 对 于 那些 希望 将 系统 设计 成 完全 模块 化 的 人 们 无 疑 是 一 个 很 好 的 
消息 。 
实际 中 是 选择 用 户 扩展 还 是 插件 ， 我 们 还 需要 根据 项 目 情况 具体 抉择 。 


15.5 常用 扩展 组 件 (一 ) UploadDialog 


UploadDialog 是 一 套 专 门 用 于 批量 上 传 文件 的 扩展 组 件 。 对 HTML 来 说 ， 文 件 上 传 组 件 是 一 
个 让 人 找 头 的 工作 。 因 为 出 于 安全 方面 的 考虑 ， 我们 既 不 能 改变 文件 上 传 组 件 的 样式 ， 也 无 法 直 
接 为 文件 上 传 组 件 赋 值 , 这 就 使 得 我 们 不 得 不 在 被 EXT 尝 染 的 十 分 漂亮 的 页 面 上 放置 一 个 相当 丑 
陋 的 文件 上 传 组 件 。 

解决 这 个 问题 的 常见 方法 是 先 创建 一 个 原生 的 文件 上 传 组 件 ， 然 后 把 它 隐藏 起 来 。 当 用 户 点 
击 某 个 按钮 时 ， 模 拟 点 击 被 隐藏 的 文件 上 传 组 件 ， 以 此 种 方式 实现 文件 上 传 功 能 。 这 种 方式 对 单 
个 文件 的 上 传 已 经 显得 过 于 复杂 了 ， 更 别提 有 些 情 况 下 我 们 还 希望 动态 选择 多 个 文件 上 传 。 

UploadDialog 就 为 我 们 提供 了 一 种 批量 上 传 文件 的 途径 ， 通 过 它 可 以 动态 选择 多 个 文件 进行 
批量 上 传 ， 而 且 它 的 界面 也 相当 漂亮 ， 不 会 出 现 粗糙 的 原生 文件 上 传 组 件 。UploadDialog 扩 展 组 


件 的 主 界面 如 图 15-4 所 示 。 
File upload diaiog a 其 
| W aitirigy... 
Stat Fienome Note 
ert po QuUueUed tor Upiood 
Orgmap po QueUed tor Upcood 
舍命 名 111 jp9 Queued od 
来 命 吉 bmp Queued tor Upload 
啤 Athd mn te 短 Resel 雾 Upload Civee 


图 15-4 UploadDialog 扩 展 组 件 的 主 界 面 


从 图 15-4 中 可 以 看 到 ， 遂 过 UploadDialog 扩 展 组 件 我 们 可 以 批量 添加 多 个 文件 ， 这 些 等 待 上 
传 的 文件 将 以 表格 形式 显示 在 表格 中 。 创 建 UploadDialog 所 需 使 用 的 代码 如 下 所 示 ; 


<1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.o0rg/TR/xhtml1i/DTD/xhtmllil-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title></title> 
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"> 
<SCript type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="../../ext-all.js"></script> 
<script type="text/javascript" src="UploadDialog/UploadDialog.js"></script> 
<link rel="stylesheet" type="text/css" href="UploadDialog/css/Ext .ux.UploadDialog.css"> 
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<script type="text/javascript"> 
Ext .onReady (function{)t 
Ext .QuickTips.init() ; 


var dialog = new Ext.ux.UploadDialog.Dialogl(t 
WE ‘O50LTap'y 
reset_on hide: false, 
allow_close._on._upload: true, 
upload autostart: false 

})3 


dialog.show('show-button'); 
久 ts 
</head> 
<body> 
<button id='show-button'>show</button> 
</body> 
</html> 
从 上 面 代码 可 以 看 出 , 我 们 在 页 面 中 引入 对 应 的 JavaScript 脚 本 与 CSS 样 式 后 ， 直 接 创建 了 一 
个 UploadDialog 对 象 ， 并 设置 了 上 传 使 用 了 uri 参 数 。 这 样 在 我 们 点 击 上 传 按 钮 时 就 会 将 选中 
的 文件 一 次 上 传 到 '05_01.jsp'， 其 他 参数 : reset_on_hidae 会 在 窗口 隐藏 时 清空 表格 中 的 文 
件 ， allow_close_on_upload 会 在 关闭 窗口 时 进行 上 传 , upload_autostart 设 置 为 false 就 不 
会 在 用 户 选择 一 个 文件 后 直接 进行 上 传 操作 。 
我 们 可 以 对 这 些 等 待 上 传 的 文件 进行 添加 、 删除、 清空 等 操作 。 在 确定 哪些 文件 将 要 上 传 后 ， 
可 以 直接 点 击 Upload 按 钮 上 传 ， 这 些 文件 会 依次 上 传 到 服务 端 ， 可 以 通过 UploadDialog 上 端的 进 
度 条 观察 到 .上 传 的 进度 情况 。 点 击 上 传 后 效果 如 图 15-5 所 示 。 





File upioad dialog a = 
State Flename 

dept jp 

orgmap 如 9 

来 命名 111 jpg 

来 命名 bnp 

来 命名 及 G 


图 15-5 ”上 和 传 过 程 中 的 界面 效果 


图 15-5 中 可 以 看 到 点 击 上 传 按钮 后 对 整个 进度 的 监控 状况 ，UploadDialog 中 不 只 列 出 了 整体 
的 上 传 进度 ， 还 显示 了 每 个 文件 的 上 传 状 况 。 图 15-5 中 显示 正在 上 传 第 四 个 文件 ， 而 且 前 三 个 文 
件 都 上 传 失 败 了 。 
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文件 上 传 成 功 后 界面 显示 效果 如 图 15-6 所 示 。 


File upload dialog a 
| Waiting-- ee 
State Fename er 

dept jpg 

orgmap jpg 有 

未 命名 111 jpg > 

未 命名 bmp ee 

未 命 圳 JPG a 


3 关 ,Ress | 从 E : Hose 


图 15-6 文件 上 传 成 功 后 的 界面 效果 


UploadDialog,js 的 源 代码 相当 复杂 ， 这 从 文件 大 小 就 可 以 初 见 端倪 。UploadDialog js 本 身 就 
有 41KB， 其 中 实现 了 事件 队列 〈EventQueue)、 有 限 状 态 机 (FSA)、 浏 览 按钮 (BrowseButton )、 
文件 记录 (FileRecord)， 并 最 终 将 这 些 组 件 组 装 为 我 们 上 面 使 用 的 UploadDialog。 

UpioadDialog 直接 继承 自 Ext .window， 整 体 上 就 是 一 个 弹出 窗口 ， 其 中 包含 了 上 方 的 进度 
条 ， 中 间 的 表格 和 最 下 面 的 功能 按钮 。 为 了 实现 上 传 提交 功能 ，UploadDialog 中 还 自动 创建 了 对 
应 的 上 传 表单 。 在 点 击 BrowseButton 时 ， 就 会 自动 生成 对 应 的 文件 上 传 组 件 ， 并 将 文件 上 传 组 件 
插入 上 传 表单 中 。 这 些 操作 都 是 由 UploadDialog 自 动 维护 的 ， 无 需 使 用 者 过 多 关心 具体 实现 的 每 
一 步骤 。 

UploadDialog 的 官方 网 址 为 http://max-bazhenov.com/dev/upload-dialog-2.0/index.php， 官 方 的 
下 载 包 还 提供 了 整体 组 件 的 处 理 图 形 介 绍 ， 感 兴趣 的 读者 可 以 去 看 一 下 。 


15.6 ”常用 扩展 组 件 (二 ) ManagedIFrame 


某 些 情况 下 ， 我 们 需要 在 EXT 中 引用 其 他 页 面 中 的 内 容 ， 这 时 可 以 使 用 Ext .Updater 通 过 
Ajax 加 载 页 面 内 容 ， 也 可 以 直接 使 用 iframe 的 形式 ， 在 iframe 中 加 载 其 他 页 面 。 这 是 因为 在 使 
用 Ext .Updater 的 情况 下 ， 加 载 的 HTML 片 段 是 直接 插入 到 当前 页 面 中 ， 在 这 一 过 程 中 有 可 能 引 
发 各 种 冲突 ， 尤 其 在 加 载 复 杂 页 面 内 容 的 时 候 更 容易 出 现 这 种 问题 。 而 使 用 过 ame 就 可 以 避免 这 
些 问 题 ， 因 为 rame 会 将 内 部 页 面 与 外 部 完全 隔离 。iframe 内 部 可 以 看 作 一 种 独立 的 窗口 ， 无 论 
内 部 加 载 什 么 样 的 内 容 都 不 会 对 外 部 页 面 造成 任何 影响 ， 所 以 大 可 放心 使 用 。 

但 是 也 因为 frame 这 种 隔离 特性 导致 了 不 小 的 问题 ， 比 如 我 们 很 难 直接 控制 iframe 内 部 页 面 
的 加 载 使 用 。 如 果 我 们 希望 从 外 部 页 面 调用 iframe 中 加 载 的 页 面 对 象 也 需要 费 些 周折 。 最 主要 的 
问题 是 无 法 让 iframe 中 的 页 面 像 其 他 部 分 一 样 直接 进行 布局 。 

ManagedIFrame 就 是 为 了 解决 这 一 系列 问题 而 被 创造 的 ，ManagedIFrame 会 自动 在 内 部 创 
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建 一 个 iframe 对 象 ， 并 对 iframe 中 的 事件 和 样式 都 进行 封装 ， 向 外 部 提供 统一 的 调用 接口 。 这 
让 我 们 可 以 通过 它 更 便捷 地 处 理 iframe， 比 如 ManagedIFrame 中 提供 的 ManagedIFrame. 
Component 和 ManagedIFrame .Panel1， 使 用 它们 与 使 用 普通 的 Ext .Component 和 Ext .Pane]l 一 
样 ， 它 们 提供 了 与 之 前 完全 相同 的 方式 来 操作 这 些 内 部 嵌入 的 iframe。 

使 用 ManagedIFrame 的 代码 如 下 所 示 : 


<1DOCTYPE html PUBLIC "“-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1l/pTD/xhtmli-transitional.dtd"> 

<html xmlns="http://www.w3.o0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title></title> 
<link rel="stylesheet" type="text/css" href=".,./../resources/css/ext-all.css"> 
<script type="text/javascript" Src="../../adapter/ext/ext-base.js"></script> 
<script type="text/javascript" SIC="../../ext-all.js"></script> 
<script type="text/javascript" src="ManagedIFrame/uxvismode.js"></script> 
<script type="text/javascript" src="ManagedIFrame/multidom,.js"></script> 
<script type="text/javascript" src="ManagedIFrame/mif.js"></script> 
<script type="text/javascript" src="ManagedIFrame/mifmsg.js"></script> 
<script type="text/javascript"> 

Ext .onReady (function(}t{ 
Ext .QuickTips,init() ; 


new Ext.ux.ManagedIFrame.Panel{{ 
title: '‘'iframe', 
defaultSrc: '06-01-01.html', 
loadMask: true 
}}) .render (document .body) ; 
了 可 这 
</script> 
</head> 
<body> 
</body> 
</html> 


上 述 代码 中 创建 了 包含 iframe 的 Panel 组 件 ， 它 和 我 们 之 前 使 用 的 Ext .Pane1 组 件 完全 相 
同 ， 可 以 为 它 设置 title 和 1oadMask 等 参数 。 唯一 不 同 的 是 在 ManagedIFrame .Panel 中 包含 了 
一 个 iframe，iframe 中 实现 的 内 容 来 自 06-01-01.html 页 面 。 

上 述 代码 的 显示 效果 如 图 15-7 所 示 。 


ee 


iframe 


06-01-01 


15-7 使 用 ManagedIFrame 显 示 的 效果 
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如 果 不 需 要 使 用 Ext .Panel 中 提供 的 标题 、 工 具 条 等 额外 功能 ， 也 可 以 直接 使 用 ManagedI- 
Frame.Component, 它 继承 自 Ext .BoxComponent， 足以 提供 最 基本 的 布局 功能 。 
使 用 ManagedIFrame .Component 的 实例 代码 如 下 所 示 : 


<IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1l/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/xhtml"> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title></title> 
<link rel="stylesheet" type="text/css" href=",./../resources/css/ext-all.css'"> 
<script type="text/javascript" src=",.,/,./adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="../../ext-all.js"></script> 


<script type="text/javascript" src="ManagedIFrame/uxvismode.js"></script> 
<script type="text/javascript" src="ManagedIFrame/multidom.js"></script> 
<script type="text/javascript" src="ManagedIFrame/mif.js"></script> 
<script type="text/javascript" src="ManagedIFrame/mifmsg.js"></script> 
<script type="text/javascript"> 

Ext .onReady (function(){ 
Ext ,QuickTips.init() ; 


Var mc = new Ext.ux.ManagedIFrame.Component({ 
defaultSrc: ‘06-01-01.html' 
}} .render('mc'); 


Ext-Get ("Diont click's fvunct4ont) 1 
mc.setLocation('06-02-01.html'); 
}); 


3 滩 
</script> 
</head> 
<body> 
<div id="mc"></div> 
<button id="b">change</button> 
</body> 
</html> 


ManagedIFrame .Component 可 以 看 作 简 易 版 的 Panel1， 它 完全 不 包含 标题 工具 条 等 附属 组 
件 。 我 们 在 页 面 上 看 到 的 只 是 平面 内 容 ， 只 不 过 这 些 内 容 都 来 自 外 部 页 面 06-02-01.html。 我 们 还 
可 以 直接 通过 ManagedIFrame .Component 的 setLocation() 函数 修改 iframe 中 显示 的 页 面 ,一 
切 操 作 都 是 非常 的 方便 。 

使 用 ManagedIFrameComponent 的 显示 效果 如 图 15-8 所 示 。 

除了 以 上 介绍 的 ManagedIFrame .Panel 和 ManagedIFrame .Component，mif.js 中 还 提供 了 
ManagedIFrame. Portlet 和 ManagedIframe .Window 等 组 件 , 分 别 用 以 对 Portal 和 弹出 窗口 进行 
支持 。 其 实现 原理 都 是 继承 对 应 的 父 类 ， 然 后 在 显示 主体 部 分 内 榜 一 个 iframe。 我 们 可 以 根据 实 
际 开发 时 的 需要 进行 选择 。 

ManagedIFrame .Window 的 显示 效果 如 图 15-9 所 示 。 
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06-02-01 上 
068-01-01 


change | 
图 15-8 ”ManagedIFrame.Component 的 显示 效果 图 15-9 ”ManagedIFrame .Window 的 显示 效果 


mifjs 是 一 个 更 加 庞大 的 组 件 体系 ， 单 是 mifjs 的 源 文件 就 有 125KB。 它 主要 的 功能 是 对 
iframe 中 的 事件 进行 封装 ， 以 此 保证 外 部 组 件 可 以 用 EXT 中 支持 的 方式 对 事件 进行 监听 和 操作 。 
在 对 iframe 的 封装 完成 之 后 ， 又 在 iframe 的 基础 之 上 构造 了 常用 的 component 、Panel、 
Portlet、Window 等 常用 功能 组 件 ， 我 们 可 以 根据 实际 情况 选择 适合 的 组 件 进行 应 用 。 


15.7 小结 


本 章 主要 介绍 了 EXT 提 供 的 用 户 扩展 与 插件 机 制 。 编写 用 户 扩 展 或 插件 ， 可 以 尽 可 能 的 实现 
代码 复 用 ， 减 少 代码 重复 的 数量 。 

本 章 的 后 面部 分 介绍 了 两 个 实际 开发 中 常用 的 复杂 扩展 组 件 , 它们 分 别 是 用 于 文件 批量 上 传 
的 UploagdDialog 和 可 以 更 容易 调用 外 部 页 面 但 更 易 管 理 的 ManagedIFrame。 通 过 它们 两 个 我 们 
可 以 看 到 利用 EXT 的 扩展 功能 可 以 实现 多 么 强大 的 功能 , 只 要 用 心 我 们 也 可 以 实现 如 此 功能 丰富 
的 扩展 组 件 。 
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本 章 内 容 

口 EXT 到 底 是 收费 的 还 是 免费 的 

口 弹出 对 话 框 不 宜 单 独 使 用 

日期 选择 控件 不 宜 单 独 和 使 用 

口 如 何 查看 EXT 中 的 和 PE 文档 

9 如 何在 页 面 中 引用 EXT 

口 了 EXT 的 汉化 

使 用 Ajax 获取 和 提交 数据 时 出 现 配 码 
Q 如 何 执行 autoboaad 加 载 的 页 面 中 的 JavaScript 丢 本 
口 有关 表格 的 一 些小 问题 

日 有 关 树 形 的 一 些小 问题 

日 如 何 使 用 input tybe="image” 

日 Ext .Window 中 鸭 eloseAct1i6n 

日 使 用 同步 Ajax 


A.1 EXT 到 底 是 收费 的 还 是 免费 的 


很 多 读者 对 这 个 问题 感 兴趣 ， 实 际 上 Jack 已 经 把 答案 写 在 http:/www.extjs.corylicense 里 了 ， 
对 EXT 的 授权 形式 做 了 详细 的 说 明 。 
EXT 的 授权 形式 有 3 种 ， 如 下 所 示 。 
(1) 免费 授权 
大 家 先 别 高 兴 ， 免 费 协 议 是 有 限制 的 ， 是 不 能 随意 使 用 的 。 只 有 满足 下 列 条 件 之 一 ， 才 能 获 
得 免费 授权 。 
口 如 果 你 在 做 一 个 开源 项 目 ， 而 且 这 个 项 目 里 没有 使 用 任何 非 开源 软件 ， 那 么 可 以 免费 使 
用 EXT。 
口 如 果 你 是 用 于 自己 学 习 研 究 或 教学 等 非 营利 性 目的 ， 那 么 可 以 免费 用 EXT。 
口 如 果 你 不 愿意 向 EXT 开 发 团队 提供 资金 上 的 资助 ， 还 是 想 要 把 EXT 用 在 自己 的 商业 项 目 中 ， 
那么 也 可 以 使 用 EXT， 但 是 你 不 能 将 EXT 用 作为 软件 开发 库 ， 也 不 能 将 EXT 用 作 开 发 工具 。 
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是 不 是 很 复杂 ? 简单 来 说 就 是 ， 如 果 你 将 EXT 用 于 非 营 利 性 目的 ， 就 可 以 在 LGPL? 协 议 下 免 
费用 。 如 果 你 将 EXT 用 于 营利 性 目的 ， 就 不 能 再 把 EXT 封 装 起 来 当 工 具 库 卖 ， 除 此 之 外 的 领域 都 
可 以 使 用 EXT。 





注意 ”如果 你 使 用 的 是 EXT 2.1 或 更 高 的 版 本 ， 开 源 协议 便 改 成 GPL 协议 。 





(2) 企业 授权 

如 果 你 不 愿意 受到 免费 协议 的 限制 ， 如 果 你 们 内 部 协议 要 求 必 须 用 企业 授权 ,如 果 你 愿意 在 
经 济 上 支持 EXT 开 发 团队 的 持续 发 展 ， 那 么 可 以 获得 EXT 的 企业 授权 。 

{3) OEM / Reseller License 

你 要 是 想 把 EXT 封 装 为 软件 开发 库 (software development library ) 或 工具 包 (toolkit》 来 卖 ， 
就 需要 取得 EXT 开 发 团队 的 专门 协作 授权 ,免费 授权 和 普通 的 企业 授权 都 是 不 允许 客户 使 用 EXT 
制作 开发 库 和 工具 包 的 。 

Jack 还 介绍 了 购买 OEM 协 议 的 好 处 ， 比 如 不 用 受 LGPL 的 限制 ， 你 的 产品 就 成 了 市 场 上 被 EXT 官 
方 开发 团队 支持 的 产品 ， 同 时 你 也 获得 了 更 多 的 合作 机 会 ， 也 获得 了 EXT 团 队 直接 授权 的 技术 支持 。 

或 许 这 样 说 还 是 不 够 清晰 ， 其 实 就 是 说 ， 如 果 你 想 开发 一 套 IDE, 还 是 去 跟 Jack 好 好 谈 谈 吧 。 

上 面 对 EXT 提 供 的 多 种 授权 方式 做 了 简要 的 介绍 ， 大 家 可 以 选择 最 适合 自己 的 一 种 。 


A.2 弹出 对 话 框 不 宜 单独 使 用 


在 EXT 中 , 不 宜 把 弹出 对 话 框 单独 拿 出 来 使 用 。 建议 大 家 去 看 看 Lightbox 这 款 JavaScript 组 件 ， 
它 本 来 是 一 个 基于 prototypejs 开 发 的 弹出 窗口 控件 ， 现 在 已 经 发 展 出 许多 由 其 他 底层 库 支 持 的 分 
文 。 更 多 详细 信息 请 参见 : http://www.huddletogether.com/projects/lightbox/。 


A.3 日 期 选择 控件 不 宜 单独 使 用 


在 EXT 中 , 不 宜 把 日 期 选择 控件 单独 拿 出 来 使 用 。JavaScript 的 日 期 选择 控件 很 多 ， 这 里 推荐 
大 家 使 用 jscalendar 这 款 JavaScript 组 件 ， 它 不 但 支持 日 期 选择 ， 还 可 以 直接 将 日 历 显示 在 页 面 上 。 
更 多 详细 信息 请 参见 : http://www.dynarch.com/projects/calendar/。 


A.4 如 何 查看 EXT 中 的 API 文档 
因为 在 EXT 中 读 取 API 文 档 时 要 使 用 Ajax， 而 在 本 地 文件 系统 中 Ajax 一 直 返 回 失 败 状 态 ， 所 
以 无 法 正常 显示 页 面 ， 解 决 方法 有 两 种 ， 如 下 所 示 。 
D 将 整个 EXT 包 复制 到 IIS 或 Tomcat 这 类 服务 器 上 ,然后 通过 服务 器 访问 API 文 档 ， 这 样 Ajax 
就 可 以 返回 正常 结果 。 


@ 协议 原文 请 参考 http://www.gnu.org/licenses/lgpl-3.0.txt。LGPL 被 认为 是 能 够 较 好 地 保护 开发 者 利益 的 -- 个 开源 
协议 。 简 单 来 说 ， 遵 守 LGPL 协 议 的 软件 可 以 使 用 ， 但 不 能 修改 。 如 果 要 改 ， 必 须 把 修改 部 分 的 代码 公开 。 
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口 EXT 官 方 网 站 上 有 人 发 布 过 localXHR.js 扩 展 插件 , 只 要 在 HTML 中 引入 这 个 插件 就 可 以 让 
EXT 支 持 在 本 地 文件 系统 中 使 用 Ajax。 找 到 localXHR .js 文件 ， 将 它 复 制 到 docs 目 录 下 ， 然 
后 在 index.html 中 加 入 <script Src="localXHR.js"></script> 语 句 。 


注意 ”这 一 行 要 加 在 ext-all.js 的 后 面 ， 然 后 直接 打开 index.htmi 就 可 以 阅读 API 文 档 了 ， 


A.5 如 何在 页 面 中 引用 EXT 


EXT 只 是 单纯 的 JavaScript， 引 用 方式 和 使 用 一 般 的 外 部 JavaScript 文 件 相 同 ， 如 下 面 的 代码 
所 示 : 


<Sscript type="text/javascript" src=",./../adapter/ext/ext-base.js"></script> 
<sctript type="text/javascript" src="../,.,/ext-all.js"></script> 


如 果 你 想 把 EXT 放 入 自己 开发 的 项 目 中 ， 需 要 包括 以 下 几 部 分 :ext-all.js、adapter 目 录 和 
resources 目 录 。 

(1) ext-alljs 是 对 所 有 源 文件 压缩 合并 后 的 结果 ， 包 含 了 所 有 EXT 控 件 。 

开发 时 可 以 考虑 使 用 ext-all-debug.js， 这 是 未 经 压缩 的 版 本 ， 通 过 Firebug 可 以 找到 具体 是 哪 
行 出 现 了 问题 。 如 果 使 用 IE， 也 可 以 用 其 中 附加 的 Ext .1log 进 行 调试 ， 但 功能 没有 Firebug 强 。 

(2) adapter 目 录 下 是 各 种 适配器 ， 选 择 其 中 一 种 即 可 。 

目前 提供 的 有 ext-base.js、Prototypejs、YUI 和 jQuery。EXT 在 这 些 核心 库 的 基础 上 构筑 起 强 
大 的 功能 ， 开 发 者 根据 自己 的 实际 需要 选择 对 应 的 适配器 , 便 可 以 在 之 前 的 经 验 基 础 上 进行 EXT 
开发 。 

(3) resources 目 录 下 是 CSS 样 式 和 图 片 资源 ， 它 们 不 一 定 和 JavaScript 脚 本 放 在 一 起 ， 只 要 CSS 
资源 和 图 片 的 位 置 对 应 即 可 。 

在 使 用 EXT 的 样式 和 图 片 时 ， 只 需要 在 页 面 中 引入 ext-all.css， 如 下 面 的 代码 所 示 : 


<link rel="stylesheet" type="text/css" 


href="../../resources/css/ext-all.css" /> 
(4) 如 果 需 要 国际 化 支持 ， 还 需要 从 build 目 录 下 复制 locale 目 录 ， 导 入 到 项 目 中 ， 下 面 会 详细 
介绍 。 


A.5.1 常见 的 “EXT is not defined” 错 误 


如 果 在 HTML 页 面 中 没有 按照 首先 引入 ext-base.js, 然后 再 引入 ext-all.js 的 顺序 , 就 会 出 现 “Ext 
is not defined” 的 错误 。 它 的 意思 是 说 EXT 这 个 对 象 还 没有 创建 ， 我 们 不 能 直接 使 用 未 定义 的 对 
象 。 因 为 EXT 这 个 作为 顶级 命名 空间 的 对 象 是 在 适配器 (adapter) 中 定义 的 ， 无 论 我 们 选择 
ext-base、Prototypejs、 jQuery 还 是 YUI 作 为 适配器 ,都 必须 把 对 应 的 适配器 脚本 放 在 ext-alljs 前 面 。 
如 果 误 将 ext-alljs 放 在 适配器 脚本 的 前 面 ， 就 会 出 现 “EXT is not defined” 的 错误 。 

同样 , 如 果 你 需要 在 页 面 中 引入 自 定义 的 EXT 扩 展 组 件 , 就 必须 把 自己 编写 的 JavaScript 脚 本 
放 在 适配器 脚本 和 ext-all.js 的 后 面 ， 否 则 就 会 出 现 “xxx is nota constructor” (xxx 不 是 构造 函数 ) 


Download at Pin5i.Com 


http://52pdf.taobao.com 


450 附录 A ”EXT 常见 问题 


的 错误 。 由 此 可 见 ，JavaScript 脚 本 的 引入 顺序 是 很 重要 的 。 


A.5.2 IE 逗号 问题 


在 IE 浏 览 器 中 不 能 出 现 多 余 的 逗号 , 在 数组 的 最 后 一 列 或 最 后 一 个 属性 中 也 不 能 出 现 多 余 的 
有 逗号， 否则 会 出 现 语法 错误 。 

var array = [ 

'namel'，'name2'，'name3'，// 正 下 会 报错 

] 

而 Firefox 环 境 下 却 没有 这 个 问题 ， 它 会 自动 忽略 结尾 部 分 多 余 的 逗号 。 在 IE 中 如 果 出 现 了 多 
余 的 逗号 ， 整 个 页 面 都 可 能 无 法 正常 显示 。 所 以 ， 如 果 在 Firefox 中 显示 正常 ， 但 在 IE 中 却 不 能 正 
常 显示 ， 很 有 可 能 是 因为 多 了 一 个 逗号 。 


A.6 ”EXT 的 汉化 


EXT 提 供 了 国际 化 的 脚本 ,这 些 脚 本 都 在 build/locale/ 目 录 下 , 你 只 需要 把 对 应 语言 的 脚本 加 
入 页 面 就 可 以 了 ， 比 如 我 们 需要 使 用 ext-lang-zh.cN.js 对 EXT 进 行 汉 化 ， 如 下 面 的 代码 所 示 ; 


<SCIIPE type="text/javascript" src=",./../adapter/ext/ext-base.js"></script> 
<script type="text/javascript" Src=".,./,../ext-all .js"></script> 

<script type="text/javascript" 
Src="../../build/locale/ext-lang-zh_CN.js"></script> 





注意 ”把 翻译 的 脚本 放 在 ext-alljs 之 后 ， 翻 译 脚本 文件 的 编码 格式 是 UTF-8。 如 果 你 的 应 用 需要 
GB-2312 或 其 他 编码 格式 ， 请 把 国际 化 文件 转换 为 你 所 需要 的 编码 格式 ， 





A.7 使 用 Ajax 获取 和 提交 数据 时 出 现 乱码 


使 用 英文 时 是 不 会 出 现 乱码 的 , 只 有 使 用 中 文 时 才 有 可 能 出 现 乱 码 。 在 Windows 操 作 系统 中 ， 
保存 文件 的 默认 编码 是 GB-2312， 而 Ajax 传输 数据 的 默认 编码 是 UTF-8。 因 此 ， 我 们 建议 大 家 将 
数据 编码 格式 统一 为 UTF-8, 不 但 可 以 解决 眼前 的 乱码 问题 , 而 且 对 以 后 扩展 为 多 语言 也 有 好 处 。 


A.8 如 何 执 行 autoLoad 加 载 的 页 面 中 的 JavaScript 脚本 


可 以 在 rabPanel 中 使 用 scripts:true 属 性 ， 它 可 以 让 mabPanel 加 载 页 面 中 的 JavaScript 脚 
本 ， 如 下 面 的 代码 所 示 : 


var tabItem = 七 abpanel.adda({ 
id:title, 
title:title, 
closable:true, 
autoScroll:true, 
autoLoad: {url:url,scripts:true)} 
证 
tabpanel .activatettabItem) ; 
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A.9 有关 表 格 的 一 些小 问题 
本 节 将 列 出 一 些 在 使 用 表格 控件 时 常见 的 问题 ， 以 及 对 应 的 解决 方法 。 


A.9.1 如何 让 表格 所 有 的 列 都 支持 排序 


当然 ， 你 可 以 在 每 个 列 上 都 设置 sortable: true 属 性 ， 让 表格 所 有 的 列 都 支持 排序 功能 。 
我 们 也 可 以 修改 colurmmMode1 的 属性 defaultsortable, 默认 情况 下 它 是 false。 如 果 希 望 所 有 
列 在 默认 情况 下 都 可 以 进行 排序 ， 就 在 构造 ColumnModel 之 后 设置 cm.defaultSortable = 
true。 这 样 ， 这 个 columnModel 下 的 所 有 列 在 默认 情况 下 都 是 可 排序 的 。 


A.9.2 ”修改 表格 的 ColumnModel 和 Store 


cm 和 ds 决定 了 表格 的 显示 方式 和 显示 数据 。 有 人 提出 希望 用 一 个 表格 显示 不 同形 式 的 数据 ， 
这 些 数据 的 列 模型 与 数据 不 一 定 相同 。 这 时 我 们 可 以 使 用 reconfigure() 函 数 , 它 的 第 一 个 参数 
是 Ext .daata.Store， 第 二 个 参数 是 Ext .grid.columnModel。 只 需要 把 新 的 as 和 cm 传 入 ， 就 可 
以 让 表格 显示 新 的 数据 了 。 


A.9.3 动态 为 as 添加 参数 baseParams 


关于 如 何 给 表格 设置 查询 参数 , 我 们 可 以 把 参数 写 到 as 设置 的 ur1 里 。 虽 然 没 有 灵活 性 可 言 ， 
但 也 算是 一 种 解决 方法 。 

还 有 一 种 方法 是 使 用 ds 中 的 baseParams， 你 为 它 设 置 的 参数 会 在 reload 时 自动 加 到 ur1 
后 面 。 如 果 每 次 都 重新 设置 ， 就 可 以 用 ds .baseParams = {name: 'value'}。 如 果 只 是 修改 
其 中 的 一 项 ， 那 么 最 好 还 是 用 ds .baseParams ['name'] = 'value' 的 形式 ， 以 免 把 其 他 参数 
都 清空 了 。 

用 baseParams 的 最 大 好 处 就 是 可 以 保留 参数 , 下 一 次 即使 直接 调用 reload() 参数 也 不 会 丢 
失 。 如 果 你 只 是 把 参数 加 入 到 1load( {params: {name:'value'}}) 中 ,那么 下 次 单 击 翻 页 按钮 时 ， 
上 次 设置 的 参数 就 不 存在 了 。 


A.10 有关 树 形 的 一 些小 问题 
本 节 将 列 出 一 些 在 使 用 树 形 控件 时 常见 的 问题 ， 以 及 对 应 的 解决 方法 。 


A.10.1 如 何 选 中 树 中 的 某 个 节点 


D 每 个 TreeNode 都 有 select () 国 数 ， 调 用 这 个 函数 就 是 选中 节点 。 

D 使 用 TreePanel 的 selectPath() 函 数 ， 传 入 的 参数 是 想 要 选中 的 节点 的 path 值 ， 你 可 以 
使 用 node.getPath() 获得 这 个 值 。 例 如 ， 如 果 根 节点 的 id 是 root ， 那 么 就 使 用 
selectPath{'/root');; 如 果 根 节点 下 有 一 个 id 为 leaf 的 节点 ， 我 们 要 选中 这 个 节点 
就 要 使 用 selectPaht('/root/leaf');， 依 此 类 推 。 
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口 通过 SelectionModel 选 择 节 点 , treePanel.getSelectionModel () 便 可 以 获得 属性 的 
选择 模型 。sm 有 一 个 select () 函数 ， 传 入 TreeNode 就 可 以 选中 这 个 节点 了 。 它 还 提供 
selectPrevious () 和 selectNext () 方 法 ， 选 中 当前 节点 的 上 一 个 或 下 一 个 节点 。 


A.10.2 刷新 树 的 所 有 节点 


TreeNode 有 一 个 reload() 函数 ， 会 刷新 它 下 面 的 所 有 节点 。 如 果 想 刷新 整 棵 树 ， 就 要 取得 
根 节点 rootNode， 然 后 调用 reload()。 


A.10.3 如何 取 得 JSON 中 自 定义 的 属性 


可 以 通过 treeNode .attributes 取 得 JSON 自 定义 的 属性 。 如 果 在 JSON 中 设置 了 {id:1， 
text:'text',key: 'key'}, 在 获得 对 应 节点 的 treeNode 后 , 使 用 treeNode.attributes.key 
的 方式 获得 key 对 应 的 值 。 


A.11 如 何 使 用 input type="image" 


关于 input type="password"、input type="submit"、input type="file" 和 input 
type="image" ， 在 EXT 中 没有 提供 对 应 的 控件 ， 我 们 可 以 根据 需要 使 用 inputType 对 
Ext .form.TextField 进 行 改装 。 
这 里 input type="image" 比 较 特殊 ， 因 为 需要 通过 src 属 性 指定 显示 的 图 片 。 默 认 情 况 下 
Ext .form.TextField 生 成 的 DOM 没 有 这 个 属性 ， 我 们 需要 修改 autocreate 参 数 ， 如 下 面 的 代 
码 所 示 : 
{ 
fieldbabel: ' 证 件 有 照片 '， 
name: ‘smallimg'!, 
inputType: 'image', 
autoCreate: {tag: “input", type: "image", src: 'http://.. ../noavatar.gif' }, 
width: 120, 
height: 140 
} 


autocreate 使 用 的 是 pomHelpez 的 语法 ， 这 样 它 就 会 生成 一 个 带 有 src 的 DOM 了 。 
A.12 Ext .Window 中 的 closeAction 


创建 Ext .Window 时 ，closeAction 的 可 选 值 有 两 个 ， 分 别 是 close 和 hide。 我 们 一 般 都 用 
hide， 关 闭 窗口 后 不 会 将 对 和 象 销毁 ， 下 次 使 用 时 直接 调用 show() 函数 就 可 以 让 窗口 显示 出 来 ， 
这 样 可 以 避免 重复 创建 窗口 的 对 象 和 DOM 造 成 的 性 能 问题 。 


A.13 ”使 用 同步 Ajax 


在 EXT 中 ， 使 用 Ajax 的 方式 是 异步 调用 ， 在 Ajax 请 求 处 理 还 未 完成 时 ， 程 序 就 会 开始 执行 后 
面 的 代码 ， 所 以 我 们 不 能 根据 代码 中 语句 的 先后 顺序 来 判断 Ajax 请 求 是 否 成 功 ， 只 能 通过 为 Ajax 
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设置 监听 函数 ， 在 请 求 完 成 时 执行 相应 的 操作 。 

除了 函数 名 不 同 ，Ext .1ib.Ajax.asyncRequest (method, uri, callback, postData) 
的 参数 类 型 和 使 用 方法 都 与 Ext .1ib.Ajax.request 相 同 。 

如 果 要 实现 同步 ， 就 一 定 要 conn.open("GET"，url，false) ;， 而 asyncRequest 的 代码 
是 conn.open("GET", url, true);, 下 面 是 一 种 实现 方法 。 

Var a = "{" + params 十 

var conn = Ext.1lib.Ajax.getConnectionObject() .conn; 

url = Url + '?_ajaxP=' + encodeURIComponent (a}); 

conn.open{"GET", url, false); 

conn.send{(null); 


Var rs = Ext.decode{conn.responseText); 
return rs; 
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本 章 内 容 

什么 是 AHR 

Q 使 用 AIR 编 写 Hello World 
口 在 A 了 下 使 用 EXT 

口 Ext .air.FileProvider 
OQ Ext .air.NativeWindow 
D Ext.sql 

日 Ext .air.Sound 

o 一 个 完整 的 示例 


EXT 从 2.0.2 版 本 开始 支持 Adobe-AIR， 我 们 可 以 通过 EXT 封 装 的 函数 编写 AIR 应 用 。 
B.1 什么 是 AIR 


AIR (Adobe Integrated Runtime〉 是 一 个 跨 操 作 系 统 的 运行 环境 ， 同 时 又 是 一 个 虚拟 机 。 可 
以 把 以 前 写 在 服务 器 上 的 应 用 打包 放 到 它 下 面 运 行 ， 它 支持 HTML、JavaScript、CSS 和 Flash。 

从 某 方面 讲 ，AIR 有 如 下 3 点 优势 。 

9 因为 应 用 程序 需要 用 户 手动 安装 ， 所 以 应 用 程序 拥有 更 高 的 操作 权限 ， 例 如 可 以 访问 本 
地 文件 或 数据 库 。 

D 应 用 程序 可 以 与 操作 系统 进行 交互 ， 例 如 操作 本 地 原生 窗口 ， 可 以 把 窗口 收缩 到 系统 任 
务 栏 里 ， 还 可 以 播放 本 地 保存 的 音乐 。 

口 安装 后 的 应 用 程序 可 以 像 普通 程序 一 样 执行 和 外 载 ， 可 以 在 系统 设置 中 直接 管理 。 

口 从 安装 使 用 上 讲 ，AIR 有 如 下 两 点 不 足 。 

Q 需要 安装 一 个 11 MB 的 运行 环境 ， 然 后 才能 做 其 他 的 事情 。 

D 每 个 AIR 程 序 都 要 先 安装 才能 使 用 ， 操 作 显得 很 烦琐 。 


B.2 使 用 AIR 编写 Hello World 
这 是 一 个 简单 的 示例 ， 具 体 步 又 如 下 所 示 。 
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(1) 下 载 并 安装 耻 E， 下 载 地 址 为 :， http://java.sun.com/javase/downloads/index.jsp。 
(2) 下 载 AIR SDK， 下 载 地 址 为 : http://www.adobe.com/products/air/tools/sdk/。 
AIR SDK 解 压 后 即 可 使 用 ， 最 好 设置 一 下 环境 变量 ， 把 bin 目 录 下 的 adl.exe 和 adtexe 加 入 到 
path 变 量 中 。adl.exe 可 以 用 来 调试 ，adt.exe 则 用 来 打包 发 布 。 
(3) 建立 一 个 名 为 helloworld 的 目录 ， 将 它 作 为 项 目的 根 目 录 。 
在 helloworld 目 录 下 新 建 一 个 名 为 application.xml 的 文件 ， 如 下 面 的 代码 所 示 。 
<?xml version="1.0" encoding="UTF-8"?> 
<application xmlns="http://ns.adobe.com/air/application/1.0"> 
<id>examples.htmi .Helloworld</id> 
<version>0.1</version> 
<filename>HelloWorld</filename> 
<initialWindow> 
<content>helloworld.html</content> 
<visible>true</visible> 
<width>400</width> 
<height>200</height> 
</initialWindow> 
</application> 


再 新 建 一 个 helloworld.html 文 件 , 它 里 边 只 有 we A 
两 个 单词 “Hello World”。 
现在 可 以 测试 我 们 的 第 一 个 AIR 项 目 了 。 在 
cmd 控 制 台 下 进入 helloworld 上 目录， 执行“aGl 
application.xml ”命令 ， 就 会 看 到 一 个 宽 400 
(像素 )， 高 200( 像 素 )， 内 容 是 Hello World 的 窗 
口 ， 如 图 B-1 所 示 。 
示例 在 air/01_hell oworld/ 中 。 图 B-] 第 一 个 AIR 程 序 HelloWorld 


B.3 在 AIR 下 使 用 EXT 


因为 EXT 是 基于 HTML、CSS 和 JavaScript 的 控件 库 ， 所 以 它 可 以 直接 在 AIR 环 境 下 运行 。 
要 在 AIR 下 使 用 EXT， 我 们 需要 为 程序 进行 一 些 配 置 ， 具 体 步骤 如 下 所 示 。 
(1) 先 引 入 EXT 需 要 的 脚本 ， 如 下 面 的 代码 所 示 : 


<link rel="stylesheet" type="text/css" href="ext-2.0.2/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-2.0.2/ext-base.js"></script> 

<script type="text/javascript" src="ext-2.0.2/ext-all.js"></script> 

<script type="text/javascript" src="ext-2.0.2/ext-lang-zh CN.js"></script> 


(2) 添加 AIR 的 JavaScript 脚 本 ， 这 个 脚本 文件 放 在 air sdk/frameworks 目 录 下 ， 如 下 面 的 代码 
所 示 : 
<script type="text/javascript" src="adobe-air/AIRAliases.js"></script> 


(3) 添加 EXT 对 AIR 的 封装 ， 这 里 使 用 的 封装 脚本 文件 来 自 Simple Task 示 例 ， 如 下 面 的 代码 
所 示 : 
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<link rel="stylesheet" type="text/css" href="ext-air/resources/ext-air.css" /> 
<script type="text/javascript" src="ext-air/ext-air.js"></script> 


这 样 就 可 以 在 AIR 中 使 用 EXT 了 ， 如 果 只 想 使 用 EXT， Ezrammmmommemeoegeoooaa 
而 不 需要 使 用 EXT 封 装 好 的 AIR 功 能 函数 , 就 不 需要 执行 后 
面 的 两 步 了 。 现在 可 以 测试 应 用 , 看 看 EXT 在 AIR 下 的 执行 
结果 ， 如 图 B-2 所 示 。 


示例 在 air/02_ext/ 中 。 全 用 
配置 好 这 些 后 ， 就 可 以 尝试 下 面 示例 中 演示 的 EXT 与 = 
AIR 的 封装 功能 了 。 | 


B.4 Ext .air.FileProvider 


通过 AIR, EXT 就 拥有 了 访问 本 地 文件 的 权限 , 我 们 可 
以 把 状态 信息 保存 到 本 地 文件 中 。 

如 果 希 望 使 用 这 项 功能 ， 需 要 在 Ext .onReady 的 开始 图 B-2 在 AR 环境 下 调用 EXT 的 对 话 框 
处 添加 如 下 代码 : 


Ext .state.Manager.setProvider (new Ext .air.Fileprovider(t{ 
file: ‘ext.state', 
defaultState: { 
mainWindow: { 








width: 800, 
height: 200, 
Xs TQ0y 
y: 10 


} 
} 

})}; 

我 们 创建 一 个 Ext .air.FileProvider， 并 把 它 设置 到 Ext .state.Manager 中 ， 此 后 就 可 
以 用 它 保 存 组 件 的 状态 信息 。 

Ext .air.FileProvider 里 有 两 个 参数 ， 如 下 所 示 。 

(1) File: 表示 用 来 保存 状态 信息 的 文件 路 径 ， 默 认 是 extstate.data。 

如 果 使 用 相对 路 径 ，AIR 会 把 它 放 到 C:\Documents and Settings\Administrator\Application Data\ 
examples.ext.FileProvider\Local Store\ext.state 下 。 

这 个 路 径 会 根据 登录 用 户 的 不 同 而 发 生 改变 ， 其 实 Windows XP 系统 会 为 每 个 登录 的 页 面 创 
建 一 个 保存 用 户 设置 的 根 目 录 。 如 果 Windows XP 安 装 在 C 盘 ， 那 么 使 用 Administrator 这 个 账号 登 
录 的 用 户 的 主 目录 就 在 C:\Documents and Settings\Administrator\ 下 ，AIR 就 是 在 这 个 目录 的 基础 
上 ， 依 照 下 述 形式 来 保存 状态 信息 文件 的 : 

Windows XP 登录 用 户 的 主 目录 /Application Data/application.xml 中 定义 的 项 目 id (安装 后 还 会 
加 上 后 缀 ) /配置 的 状态 文件 名 。 

我 们 讨论 过 ， 在 设置 state 时 ， 可 能 会 出 现 的 一 些 莫名 其 妙 的 问题 ， 如 果 和 希望 清空 以 前 保存 
的 状态 ， 可 以 直接 进入 对 应 目录 ， 删 除 状 态 文件 。 
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(2) defaultSstate: 用 来 为 第 一 次 启动 程序 时 设置 默认 状态 。 

它 使 用 stateId 作 为 标志 ， 后 面 紧 接 stateId 对 应 组 件 的 状态 设置 。 

mainwindow 有 特殊 含义 ， 它 为 air 的 主 窗口 配置 状态 ， 可 以 把 这 看 作 配 置 AIR 主 窗口 的 一 个 
方式 。 

示例 在 air03 fileprovider/ 中 。 


B.5 Ext .air.NativeWindow 
它 通过 AIR 调 用 本 地 原生 窗口 ， 如 下 面 的 代码 所 示 : 


Var win = new Ext.air.NativeWindow!{ 
id: 'mainwindow' ， 
instance: window.nativeWindow, 
minimizeToTray: true, 
trayIcon: 'ext-air/resources/icons/extlogol16.png', 
trayTip; ' 原 生 窗 口 '， 
trayMenu ; [{ 
text: ' 打 开 窗 口 '， 
handler: function()t{ 
win.activatel(); 
} 
Fa mh € 
text: ' 退 出 ' ， 
handler: function()}t 
air,.NativeApplication.nativeApplication.exit!(); 
) 
}] 
汪汪 


简单 看 一 下 上 面 用 到 的 参数 ， 如 下 所 示 。 

口 为 Ext .air.NativewWindow 定 义 一 个 ia， 让 这 个 窗口 成 为 我 们 使 用 的 主 窗 口 。 

D instance 传 入 的 window.nativewindow 其 实 就 是 原生 窗口 ， 如 果 你 想 直 接 操 作 air 这 个 

原生 窗口 实例 ， 可 以 通过 win.instance 得 到 对 它 的 引用 。 

D 如 果 希 望 打开 新 页 面 ， 则 可 以 传递 html : 'test.html '。 

D minimizeToTray 会 在 我 们 对 窗口 执行 最 小 化 操作 时 让 窗口 收缩 到 任务 栏 中 。 

trayIcon 是 收缩 后 任务 栏 上 显示 的 图 标 ，trayTip 表 示 鼠 标 放 到 这 个 任务 栏 图 标 上 显示 的 
提示 信息 。trayMenu 是 在 图 标 上 单 击 鼠标 右键 时 弹出 的 菜单 ， 这 里 包含 一 个 “打开 窗口 ”项 和 
一 人 “进出 居 项 。 

示例 在 air04 nativewindow/ 中 。 


B.6 Ext .sql 


AIR 里 使 用 的 数据 库 是 一 款 名 为 sqlite3 的 嵌入 式 数据 库 ，EXT 在 此 基础 上 进行 了 封装 。 下 面 
我 们 来 看 一 些 简 单 的 操作 。 


OD var conn = Ext.sql.Connection.getInstancet{); 
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这 是 一 个 工厂 模式 ， 根 据 Ext .isAir 判 断 是 返回 AIR 还 是 google gear 的 实现 。 


注意 目前 市 面 上 发 布 的 EXT 所 提供 的 isRir 属 性 都 无 法 识别 air-1.0， 只 有 使 用 simple task 示 例 中 
的 ijsAir = navigator.userAgent .上 oLowerCase() .indexof("aaobeair") != -1; 
才能 正确 识别 。 如 果 你 不 想 用 它 里 面 未 压缩 的 ext-base.js 和 ext-all.js， 那 就 需要 把 这 个 修改 
添加 到 自己 的 项 目 中 。 


D conn .open ('ext .dpb， 


连接 到 数据 库 ， 数据 库 文件 是 当前 目录 下 的 extdb。 如 果 文 件 不 存在 , 那么 会 创建 一 个 新 文件 。 


conn.createTablelt{ 

name: "USer '， 

key: 'userId', 

fields:[ 

{name: 'userId', type: ‘int'}, 
{name: 'name', type: 'string'}, 
{name: 'sex', type: 'string'}, 
{name: 'descn', type: 'string') 

] 

}):s 


创建 一 个 名 为 user 的 表 ， 主 键 是 userId， fields 用 来 定义 字段 名 称 和 类 型 。 

Var USerDao = conn.getTablel('user', 'userId'):; 

根据 表 名 和 表 主 键 获 得 一 个 表 对 应 的 dao 对 象 。 获 得 aao 对 象 后 ， 可 以 执行 查询 和 添加 等 操 
作 ， 代 码 如 下 所 示 : 


Var USerS = userDao.select!(},; 


var newUser = { 


userld : 'username', 
name : ‘kayzhan', 

sex : 'male', 

descn : 'description'’ 


} 


UserDao.insert (newUser); 


B.7 Ext .air.Sound 

AIR 还 可 以 直接 播放 本 地 目录 下 的 音乐 文件 ， 这 是 不 需要 其 他 插件 就 能 实现 的 原生 支持 。 在 
EXT 中 ， 对 这 项 功能 进行 了 封装 ， 只 需要 一 行 代码 便 可 以 播放 音乐 ， 如 下 所 示 : 

Ext .air.Sound.play!{'beep.mp3',0); 

其 中 ， 第 一 个 参数 是 音乐 文件 的 名 称 ， 第 二 个 参数 是 跳 过 起 点 多 少 毫秒 (ms) 开始 播放 。 


注意 ， 第 二 个 参数 不 能 省 略 。 
示例 在 air06 sound/ 中 。 
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B.8 一 个 完整 的 示例 1 











使 用 AIR 制 作 一 个 有 浏览、 添加 和 删除 功能 的 表格 (如 wee 中。 
图 B-3 所 示 )， 数 据 的 读 取 和 更 新 都 使 用 Ext . sql 实现 。 下 
下 面 我 们 将 使 用 ext-2.0.2 和 ext-air 来 实现 这 些 功能 。 = 


B.8.1 使 用 Ext .data.Store 与 数据 库 进行 交互 


表格 需要 通过 Ext .data. Store 获 得 数据 , 以 前 我 们 都 
是 通过 MemoryProxy 和 HttpProxy 这 类 组 件 从 内 存 或 HTTP 
服务 器 中 获得 数据 。 现 在 我 们 用 AIR, 需要 从 数据 库 获 得 数 
据 ， 所 以 先 要 实现 一 个 Userstore， 把 数据 库 和 表格 联系 


起 来 。 图 B-3 ”在 AIR 中 使 用 EXT 的 表格 控件 实 
先 定义 一 个 Record， 统 一 数据 结构 ， 如 下 面 的 代码 所 现 CRUD 功 能 


sp 


不 : 


var User = Bxt .data.Record.createt [ 
{name: ‘'userId', type: 'int'}, 
{name: ‘'name', type: ‘string'}, 
{name: 'sex', type: 'string'}, 
{name: 'descn', type: 'string')} 
i 


现在 可 以 为 User 创 建 UseStore 了 ， 如 下 面 的 代码 所 示 : 


UserStore = Ext .extend(Ext .data.Store, { 
constructor: function{conn)t{ 
UserStore.superclass.constructor.call (this, { 
reader: new Ext,.data.JsonReader{{ 
id: ‘'userId', 
fields: User 
}) 
曙 属 ， 
this.conn = conn; 
this.proxy = new Ext.sql.Proxy{conn, 'user', 'userId', this); 


this.proxy.on('beforeload', this.prepareTable, conn); 
了 


addUser : function(data)t{ 
this.suspendEvents(); 
this.clearFilter(}); 
this.resumeEvents!(); 
this.loadDatal[datal], true); 
this.fireEvent{'datachanged', this); 
¥, 


prepareTable : function(){ 


tryt 
this.createTablelt{ 
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name: 'user', 
key: ‘userIid', 
fields: User.prototype.fields 
J 
}catch(e) {console.logl(e)} 
} 
Ds 


整个 store 分 为 3 大 部 分 ， 如 下 所 示 。 

(1) constructor: 构造 函数 ， 用 于 进行 初始 化 。 

首先 ， 调用 Ext .data .Store 的 构造 函数 初始 化 读 取 数 据 的 JsonReader。JsonReader 的 id 
是 数据 库 表 的 主键 userId，fields 部 分 是 字段 定义 。 其 次 ， 将 Ext .sql .connection 赋 值 给 
this.conn。 然 后 ， 使 用 conn、 数 据 库 表 名 、 表 主键 名 和 store 作 为 参数 ， 生 成 Ext .sql. Proxy 
实例 。 

最 后 监听 proxy 的 beforeload 事 件 ， 在 读 取 数 据 之 前 调用 prepareTable 函 数 初始 化 表 结 
构 。 如 果 表 已 经 存在 ， 那 么 就 不 会 删除 表 里 已 有 的 数据 。 

(2) adadqaUser: 添加 一 条 用 户 信息 。 注 意 ， 不 能 是 Record， 只 能 是 简单 的 JSON 对 象 。 

先 调用 clearFilter() 清 空 过 滤 信 息 ， 让 所 有 数据 都 显示 出 来 ， 然后 调用 loadpata{) 添 加 
数据 ， 最 后 触发 datachanged 事 件 。 

(3) prepareTable: 创建 表 结 构 。 

调用 conn 的 createTable 函 数 ， 创 建 表 名 为 user、 主 键 为 userId、 字 段 定义 为 User. 
prototype.fields 的 表 。 

这 里 解释 一 下 ， 在 构造 函数 中 创建 Ext .sql .Proxy 时 会 将 store 本 身 作 为 参数 传递 给 
Proxy，Proxy 则 会 对 store 的 add、update 和 remove 这 3 个 事件 进行 注册 ,保证 可 以 在 用 户 操 作 
store 时 对 数据 库 进 行 同步 操作 。 


this.store.on{({'add', this.onaAdd, this): 
this,.store.on{'update', this.onUpdate, this); 
this.store.on('remove', this,.onRemove, this); 


如 果 不 希 望 Proxy 将 store 中 的 操作 同步 到 数据 库 ， 只 需要 在 创建 Proxy 时 加 上 readonly 参 
数 ， 如 果 为 true，Proxy 将 不 会 自动 同步 数据 。 


this.proxy = new Ext.sql.Proxy(conn, 'user', 'userId', this, true): 
B.8.2 打开 数据 库 连 接 并 创建 store 
如 之 前 提 到 的 ， 我 们 先 连接 数据 库 ， 然 后 创建 store。 


var conn = Ext.sql.Connection,getInstance(); 
conn ,openl( 'exc.db'):; 
Var Store = new UserStorel(conn); 


B.8.3 创建 表格 
现在 我 们 可 以 创建 表格 了 , 借助 EXT 提 供 的 MVC 模 型 , 我 们 可 以 直接 操作 上 节 创 建 的 store 
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对 象 ， 而 无 需 对 表格 中 已 有 的 代码 进行 修改 。 


var Selections = new Ext.grid.CheckboxSelectionModel (); 


var cm = new Ext.grid.ColumnModel([ 
selections, 
{header: ' 编 号 ' ,dataIndex: 'userId' ,sortable:true}， 
{header:' 名 称 ' ,dataIndex: 'name' ,sortable:true)}， 
{header: ' 性 别 ' ,dataIndex:'sex',sortable:true}, 
{header: ' 备 注 ', dataIndex: 'descn' ,sortable:true} 


Var grid = new Ext.grid.GridPanel{({ 
autoHeight: true, 
store: store, 
ccm: cm, 
sm: Selections， 
renderTo: 'grid', 
tbar: new Ext.Toolbar{[('-', { 
text: ' 添 加 一 行 '， 
handler: function()t{ 
var user = { 
userId: new Date() .getTime{), 
name: ‘name', 
Sex: 'Sex', 
descn: 'descn' 
时 
store.addUser (user); 


text : ' 删 除 一 行 ' ， 
handler: function()({ 
Ext .Msg .confirm{' 信 息 '，' 确 定 要 删除 ? '，function (btn){ 
if (btn == ‘yes'y { 
selections .each(function(s){ 
store.remove{s); 
7 


rw eet 

这 些 步骤 与 普通 的 EXT 基 本 相同 ， 先 建立 columModel 和 selectionModel1， 然 后 拼合 表格 。 
bbar 部 分 设置 了 两 个 按钮 ， 一 个 用 于 添加 用 户 数 据 ， 另 一 个 用 于 删除 选中 行 的 数据 。 在 执行 添 
加 和 删除 操作 时 ，Proxy 也 会 自动 同步 数据 库 中 的 数据 。 

到 此 为 止 ， 一 个 完整 的 表格 已 经 完成 。 

示例 在 air/07_ grid 中 。 
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本 章 内 容 

口 EXT 开 发 计划 
日 EXT2.] 

O EXT2.2 

口 EXT 2.2.1 


C.1 EXT 开发 计划 


2008 年 3 月 20 日 ， EXT 官 方 网 站 公布 了 EXT 在 2008 年 至 2009 年 的 开发 计划 。 直 至 2008 年 11 月 
13 日 ， 已 经 有 EXT 2.1 和 EXT 2.2 两 个 版 本 相继 发 布 。 我 们 可 以 通过 下 面 这 份 对 EXT 开 发 计划 的 


翻译 来 了 解 EXT 从 2.x 到 3.x 的 升级 过 程 。 在 这 次 升级 过 程 中 ， 主 要 改写 了 事件 注册 模型 ， 并 为 后 
台 服 务 器 提供 了 更 多 的 支持 。 
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口 复 选 框 / 单 选 框 

口 多 选 控件 

口 状态 栏 

EXT2.2 (2008 夏 》 

口 加 强 Bxt.Ajax 

口 为 EXT 组 件 提供 复位 样式 的 功能 

口 提供 树 形 加 载 数 据 的 更 多 实例 (包括 加 载 XML 格式 数据 的 实例 ) 
日 支持 浏览 器 历史 记录 

日 滑动 条 组 忻 

昌文 件 上 传 控 件 

EXT 30 (2008 冬 /2009 初 ) 

口 更 新 EXT 事 件 注册 模块 

口 Flash 图 表 API 

日 支持 Comet/Bayeux 

日 .为 EXT 组 御 集 成 客户 端 服务 器 的 数据 绑 定 /编组 
口 第 三 方 RPC 的 演示 示例 ( 比 zoDWR ) 

口 提高 可 访问 性 


C.2 EXT2.1 


EXT 2.1 的 主要 更 新 如 下 所 示 。 
口 完全 支持 REST 

D 状态 栏 

D 滑动 条 

D 远程 读 取 组 件 配 置 

D 表格 查询 插件 

口 布局 浏览 器 

口 Spotlight 示 例 


C.2.1 完全 支持 REST 


REST (Representational State Transfer, 表述 性 状态 传输 ) 是 一 种 Web Service 风 格 的 架构 模式 ， 
它 可 以 完全 调用 HTTP 语 义 。 下 面 我 们 来 看 看 EXT 是 如 何 为 REST 提 供 支 持 的 。 
1. 使 用 GET 获 得 用 户 信息 


Ext .Ajax.request({ 
url: ‘'/users', 
method: 'GET' 

}) 
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2. 使 用 POST 添加 一 篇 新 文章 


Ext .Ajax.request ({ 
url: '/articles', 
method: 'POST ' ， 
params: { 
author: 'Patrick Donelan', 
subject: ‘RESTful1 Web Services'! 
} 
}) 


3. 使 用 PUT 更 新 文章 信息 


Ext .Ajax.request ({ 
url: '/articles/restful-web-services', 
method: 'PUT', 
params: { 
author: 'Patrick Donelan', 
subject: ‘RESTful Web Services are easy with Ext!' 
} 
}) 


4. 使 用 DELETE 删 除 文 章 信息 


Ext .Ajax.request(t{ 
url: '/articles/rpc~is-the-best-web-architecture', 
method: 'DELETE' ， 
success: function{(}{ alert('Begonel'); } 

}) 


为 了 避免 缓存 影响 操作 ， 可 以 利用 下 面 的 语句 禁用 缓存 。 


Ext .Ajax.disableCaching = false; 


为 了 返回 JSON 数 据 ， 可 以 设置 默认 的 首部 信息 。 


Ext .Ajax.GQefaultHeaders = { 
'Accept': 'application/json' 
}? 


在 访问 受 保护 的 资源 时 ， 需 要 在 首部 中 添加 授权 信息 ， 如 下 所 示 。 


Ext .Ajax.defaultHeaders.Authorization = "Basic QWxhZGRpbjpvcecGVuIHN1c2Ft2ZQ=="; 
Ext .Ajax.request!({ 

url: '‘'/protected_content', 

method: 'GET' 
}) 


C.2.2 状态 栏 


实际 上 ， 状 态 栏 〈Statusbar) 就 是 放 在 bbar 上 的 工具 条 。 顾 名 思 义 ， 我 们 可 以 在 它 上 面 执行 
许多 与 状态 有 关 的 操作 。 下 面 我 们 来 看 看 图 C-1 中 的 效果 。 

状态 栏 的 实现 过 程 与 工具 条 的 实现 过 程 一 样 ， 先 创建 一 个 Panel， 然 后 把 状态 栏 放 到 对 应 的 
bbar 位 置 上 ， 如 下 面 的 代码 所 示 。 
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图 C-1 状态 栏 控件 的 效果 


new Ext.Panell(t 
上 title: 'StatusBar', 
width: 300, 
height: 100, 
renderTo: 'status', 
bbar: new Ext.StatusBarl(t{ 
id: ‘my-status', 
defaultText: 'Default status text', 
defaultIconCls: 'default-icon'， 
text: 'Ready', 
iconCls: 'ready-icon', 
items: [{ 
text: 'ok', 
handler: function() { 
Ext .getcmp( 'my-status') .setSstatust{t 
忆 灿 半 人 OO 
iconCls: ‘ok-icon', 
clear: true 
3 
} 
| 
text: 'busy', 
handler: function{) { 
Ext.getCmp('my-status').showBusy(); 
} 
Fe Sm 4 
text: 'clear', 
handler: function() { 
Ext .getCmp{ 'my-status') .clearStatus (); 
} 
}] 
}) 
二 这 


状态 栏 比 工 具 条 多 了 几 个 参数 ， 如 下 所 示 。 

口 text 和 iconCls 参 数 ， 它 们 分 别 是 状态 栏 初始 化 后 显示 的 文字 和 图 标 。 

DO defaultText 和 defaultIconCls 参 数 ， 表 示 默 认 显 示 的 文字 和 图 标 。 

初始 化 和 默认 的 区 别 在 于 : 状态 栏 第 一 次 在 页 面 上 泻 染 时 , 首先 显示 的 就 是 cext 和 iconcls。 
在 用 setstatus () 函数 修改 了 状态 栏 的 状态 信息 后 ,一 段 时 间 后 会 自动 清空 状态 信息 ， 这 时 显示 
的 就 是 aefaultText 和 defaultIconcls 了 。 

下 面 我 们 来 看 看 在 状态 栏 里 设置 的 3 个 按钮 ， 如 下 所 示 。 

DD ok 按钮 的 处 理 函 数 会 调用 setstatus () 函数 将 状态 栏 左 边 的 文字 改 为 “OK”， 图 标 改 为 
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OKk-icon。 
参数 clear 表 示 这 段 状 态 文字 和 图 标 在 一 段 时 间 后 会 自动 消失 ， 并 显示 默认 的 文字 和 图 标 。 
单 击 ok 按钮 后 的 效果 如 图 C-2 所 示 。 
D busy 按 钮 的 处 理 函 数 会 调用 showBusy () 函数 ， 这 将 显示 “Loading...” 和 相应 的 图 标 。 
为 这 个 功能 很 常用 ， 所 以 StatusBar 中 内 性 了 这 个 状态 ， 我 们 可 以 通过 showBusy () 直接 调 
用 它 ， 效 果 如 图 C-3 所 示 。 


ore ne Hi ， 

| 

i | 

ok oo jl busy chear | lipapge ok lbusyl cloor | 
图 C-2 单 击 ok 按 钮 后 显示 的 效果 图 C-3 ”调用 showBusy () 函数 后 的 显示 效果 


D clear 按 钮 的 处 理 函数 会 调用 clearstatus () 函数 。 它 的 功能 很 简单 ， 直 接 清 空 状态 文字 
和 图 标 ， 如 图 C-4 所 示 。 
-和 Te 这 ei ff 3 


er 


ok busy ， Bea 


图 C-4 调用 clearSstatus{) 函数 清空 状态 文字 和 图 标 


有 关 状 态 栏 的 基本 应 用 就 讲 到 这 里 , 我们 使 用 的 示例 在 2.1/1-statusbar.html 中 。 建 议 大 家 去 看 
看 ext-2.1/examples/statusbar/ 目 录 下 的 示例 ， 其 中 ValidationStatus 的 效果 非常 令 人 惊叹 。 


C.2.3 滑动 条 


滑动 条 〈Slider) 直接 继承 自 Ext .BoxCcomponent， 而 不 是 继承 自 Ext . form. Field。 虽然 它 
也 有 value， 可 以 使 用 setvalue () 赋值 和 getvalue() 取 值 ， 但 是 它 不 属于 Ext .form.Field 的 
继承 体系 。 

创建 滑动 条 十 分 简单 ， 只 需要 知道 它 的 宽度 、 最 大 值 和 最 小 值 即 可 ， 具体 方法 如 下 所 示 : 


new Ext.Sliderl(t{ 
renderTo: 'sliderl', 
width: 214, 
minValue: 0, 
maxValue: 100 

Rs 


这 样 我 们 就 可 以 得 到 一 个 宽度 为 214〔 像 素 )， 最 小 值 为 0%， 最 大 值 为 100 的 滑动 条 了 ， 如 图 
C-5 所 示 。 
可 以 通过 value 设 置 滑动 条 的 初始 值 , 还 可 以 使 用 increment 来 设 定 滑动 的 步 长 , 如 下 所 示 ， 
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new Ext.Slider!(t{ 
renderTo: ‘slider2', 
width: 214, 
minValue: 0, 
maxValue: 100, 
value:50, 
increment: 10 

})3 


这 里 设置 的 初始 值 为 0， 滑动 块 显示 在 正中 间 ， 如 图 C-6 所 示 。 


) Hr er 
图 C-5 ”滑动 条 显示 效果 图 C-6 为 滑动 条 设置 初始 值 
我 们 还 可 以 实现 竖 直 的 滑动 条 ， 只 需要 我 们 修改 两 个 参数 : vertical: true 和 height: 214， 如 下 


所 示 。 

new Ext.Slider{{ 
renderTo: 'Slider3 '， 
height: 214, 
minValue: 0, 
maxvalue: 100, 
vertical: true 

}) 3» 


| 
既然 滑动 条 是 竖 直 的 ， 就 不 能 设置 宽度 了 ， 而 应 该 设置 高 度 。 我 们 | 
设置 滑动 条 的 高 度 为 214 (像素 )， 最 小 值 0 表示 在 底部 ， 最 大 值 100 表 示 | 
在 顶部 ， 如 图 C-7 所 示 。 | 
示例 在 2.1/2-slider.html 中 。 
建议 大 家 参考 ext-2.1/examples/slider/ 目 录 下 的 示例 ， 其 中 为 slider | 


编写 了 扩展 ， 可 以 实时 显示 拖 动 的 数值 ， 还 有 用 CSS 修 改 滑动 条 显示 样 


| 


式 的 示例 。 图 C-7 竖 直 的 滑动 条 
C.2.4 远程 读 取 组 件 配置 
远程 读 取 组 件 配置 (ComponentLoader) 并 不 是 一 个 让 ka 二 一 


包含 在 ext-alljs 中 的 组 件 ， 我 们 在 示例 中 看 到 的 是 ， | 

Ext .ux .ComponentLoader 的 扩展 组 件 。 通 过 它 ， 我 们 ] 

可 以 使 用 从 后 台 读 取 的 JSON 数 据 来 对 页 面 的 组 件 进行 初 

始 化 。 实 际 上 ， 在 它 的 内 部 还 是 使 用 了 Ext.compo- 

nentMgr， 可 惜 ext-2.1/examples/remoteload/ 目 录 下 只 有 用 

PHP 实 现 的 示例 。 我 们 写 了 一 个 HTML 的 示例 ， 通 过 
localXHR.js 读 取 本 地 文本 文件 中 的 JSON 数 据 获得 配 : 

置 ， 然 后 为 页 面 创建 一 个 layout:'border' 的 Viewport sth 
组 件 ， 如 图 C-8 所 示 。 图 C-8 远程 读 取 配置 生成 的 Viewport 
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看 一 下 2.1/3-remoteload.html 中 的 JavaScript 脚 本， 如 下 所 示 。 


Ext .ux.ComponentLoader. load!(t{ 
url: '3-remoteload.txt', 
params: { 

testing: '‘'Testing params' 
} 
}); 


上 述 代 码 演示 了 Ext .ux .ComponentLoader 使 用 Ajax 读 取 3-remoteload.txt 中 的 数据 ， 并 传递 
testing: 'Testing params ' 的 参数 。 当然 ， 我 们 这 里 用 不 到 参数 。 
前 台 代 码 只 有 这 些 ， 具 体 的 配置 代码 在 3-remoteload.txt 中 ， 如 下 所 示 : 


{components:[{ 
xtype: 'viewport', 
layout: 'border', 
items:[{ 
region: 'north', 
html: 'north' 


region:'south', 
html:'south'’ 


region: 'west ' ， 
html :west 


region: 'east ' ， 
html:'east' 


region: 'center', 
htm]l:'center' 
}] 
}] ,success:true)} 


可 以 看 出 ， 这 是 一 段 完整 的 JSON 数 据 ， 需 要 注意 其 中 的 两 个 部 分 : success:true 表 明 返 回 
成 功 ， 只 有 成 功 的 情况 下 才 会 继续 处 理 ，components 是 具体 的 配置 部 分 ， 我 们 用 到 的 Viewport 
就 包含 在 其 中 。 

通过 这 种 方式 ,我 们 可 以 让 后 台 为 前 台 提供 需要 的 组 件 和 布局 信息 ， 这 为 用 户 自 定 义 界面 提 
供 了 很 大 的 帮助 。 这 里 只 演示 了 一 个 最 简单 的 示例 ， 推 荐 大 家 看 一 看 ext-2.1/examples/remoteload/ 
下 的 PHP 示 例 。 


C.2.5 表格 过 滤 组 件 


表格 过 滤 组 件 (GridFilter〉 的 规模 比较 庞大 ， 我 们 首先 要 在 2.1/4-gridfilter.html 中 引用 9 个 
JavaScript 脚 本 ， 然 后 才能 在 页 面 中 使 用 这 个 表格 过 滤 组 件 ， 如 下 面 的 代码 所 示 : 


<script type="text/javascript" src="./grid-filtering/menu/EditableIltem.js"></script> 
<script type="text/javascript" src="./grid-filtering/menu/RangeMenu.js"></script> 
<script type="text/javascript" src="./grid-filtering/grid/GridFilters.js"></script> 
<script type="text/javascript" src="./grid-filtering/grid/filter/Filter.ijs"></script> 
<script type="text/javascript" src="./grid-filtering/grid/filter/StringFilter.js"> 


Download at Pin5i.Com 


http://52pdf.taobao.com 


附录 C ”EXT 的 版 本 变迁 469 


</script> 

<script type="text/javascript" src="./grid-filtering/grid/filter/DateFilter.js"> 
</script> 

<script type="text/javascript" src="./grid-filtering/grid/filter/ListFilter.js*"> 
</script> 

<Script type="text/javascript" src="./grid-filtering/grid/filter/NumericFilter.js"> 
</script> 

<script type="text/javascript" src=".,/grid-filtering/grid/filter/BooleanFilter.js"> 
</script> 


这 个 表格 过 滤 组 件 的 功能 很 强大 ， 它 可 以 搜索 string、date、1list、numeric 和 boolean 
这 5 种 类 型 的 数据 , 它 已 经 被 设计 成 插件 的 形式 , 使 用 的 时 候 可 以 直接 设置 到 表格 和 PagingToolbar 
中 ， 不 需要 改动 原 有 的 表格 代码 ， 只 需要 定义 一 个 cridFilters 并 放 到 对 应 的 plugins 属 性 中 即 
可 ， 如 下 面 的 代码 所 示 : 


var filters = new Ext.grid.GridFilters({({ 
filters:[ 
{type: ‘numeric', datalIndex: 'id'}, 
{type: 'String'， datalIndex: 'company'}, 
{type: ‘'numeric', datalndex: 'price'}, 
{type: 'Gate'， dataIndex: '‘'date'}, 
{ 


tyies Tiat., 
dataIndex: 'size', 
options: ['small'’', ‘medium', 'large', ‘'extra large'], 


phpMode: true 


{type: ‘boolean', datalIndex: 'visible'} 
1] 


id 和 price 字 段 使 用 的 数字 过 滤器 有 大 于 、 小 于 和 等 于 3 种 情况 ， 如 图 C-9 所 示 。 


握 村 这 人 由 ee _ 挤 格 EL 可 欧 大 小 
1 ;| Sort hscending 3 2008.04.25 true 1 
2 :关上 Sort Descendng ! 2008.04-25 tase 2 
3 t } 2008-04-25 true 3 
4 ;外 Columns » | 2008-04-25 talse 4 
5 局 ERers 人 | > 皮包 te 5 
| < 
| = 


| Vp - a | 


图 C-9 ”表格 过 滤 组 件 一 一 数字 过 滤器 
Company 字 段 使 用 的 是 字符 串 过 滤器 ， 可 以 输入 文字 进行 模糊 搜索 ， 如 图 C-10 所 示 。 





掘 和 对 公司 了 侈 格 Zs 可 多 大 小 
1 cormpany1 | 他 | Sort Ascendng 4-25 Irue 1 
2 compam2 |! A) Sort Descendng 25 talse 2 
3 company3 | 04-25 Yue 3 
4 companys [3 coumns » 25 tise ' 
上 
5 Sompems 。 | 0] Fers :ja 5 


图 C-10 表格 过 滤 组 件 一 一 字符 串 过 滤器 
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Date 字 段 使 用 的 是 日 期 过 滤器 ， 有 3 个 时 间 段 可 供 选 择 ， 如 图 C-11 所 示 。 


频 每 | 音 局 电机 =) 机 见 大 小 
Cormery1 4 2008.04-25 和 Sort 6cendimg 
Compeny2 22 2008 04-25 | Sert Onscendng 
3 Comperny3 3 和 2006.04.25 
compary4 有 2006-04.25 里 Columns » 
commarry< $5 P08-04-25 FRR vl AR 


图 C-11 表格 过 滤 组 件 一 一 日 期 过 滤器 
Size 字 段 使 用 的 是 列表 过 滤器 ， 自 定义 了 几 种 搜索 条 件 ， 如 图 C-12 所 示 。 


如 分 时 傣 烙 日 期 可 型 vi 大 小 < 
1 ComparyY1 11 2008-04-25 true | | Sort Ascending 
comparY2 22 2008-04-25 tatse £4 Sort Descending 
3 Compery3 33 2008-04-25 true 
4 comparyY4 组 2008.-04-25 talse | 团 Courvs 》 
5 CoOmfarWY5 有 2008-04.25 true Filkers » | 
Yes 
$$ No 


图 C-12 ”表格 过 滤 组 件 一 一 列表 过 滤器 
visible 使 用 的 是 布尔 过 滤器 ， 通 过 radioMenu 选 择 true 或 false， 如 图 C-13 所 示 。 


周全 双 届 伍 契 日 利 而 见 大 小 。 - 

COmPaYY1 1 2008-04-25 yu pa Scrt Ascendng 

Comparry2 22 2008-04-25 Iatsn 2 不 Sort Descerrdrmo 
3 comparry3 33 2008-04-25 rue 3 
comparmy4 和 4 民 2008-04-25 Hatse 和 村 Colmns 

Corpparys 要 本 2008-04.25 trum Per "| 

民 ] medim 
EE 


图 C-13 表格 过 滤 组 件 一 一 布尔 过 滤器 


有 一 个 问题 需要 注意 ， 因 为 是 扩展 的 原因 ， 默 认 的 resources 下 没有 包含 需要 的 图 片 ， 我 们 只 
能 在 JavaScript 代 码 中 手工 指定 了 ， 如 下 面 的 代码 所 示 : 


Ext .menu .RangeMenu .prototype.icons = { 
gt: './grid-filtering/img/greater_ then.png', 
lt: './grid-filtering/img/less.then.png', 
eq: './grid-filtering/img/equals.png' 





}; 
Ext .grid.filter.SstringFilter.prototype.icon = './grid-filtering/img/find.png'; 
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C.2.6 布局 浏览 器 
通过 ext-2.1/examples/layout-browser 目 录 下 的 新 示例 可 以 浏览 所 有 的 布局 方式 ， 如 下 所 示 。 
口 基本 布局 方式 
基本 布局 方式 有 Absolute、Accordion、Anchor、Border、Card(TabPanel)、Card(Wizard)、 
Column Fit、Form 和 Table 等 9 种 。 
口 自 定义 布局 方式 
自 定义 布局 方式 有 Row、Center 两 种 。 
0 综合 示例 
综合 示例 有 Absolute Layout Form 和 Tabs with Nested Layouts 两 个 。 
它 的 参考 价值 远大 于 它 演示 的 那 几 种 布局 ， 建 议 大 家 认真 研究 一 下 这 个 示例 。 


C.2.7 ”Spotlight 示例 


又 是 一 个 绚丽 的 示例 ， 使 用 ext-2.lexamples/core/ 下 的 Spotlight， 用 动画 效果 将 整个 背景 遮 四 
起 来 ， 每 次 只 显示 当前 允许 编辑 的 Panel。 显 示 完 每 个 Panel 之 后 ， 又 以 动画 的 效果 撤销 遮 单 效果 。 
如 果 将 该 示例 用 在 提示 信息 的 场合 , 也 许 又 会 要 让 许多 用 户 感到 惊讶 。 它 在 ext-2.1/examples/core/ 
目录 下 ， 建 议 认 真 看 一 下 。 

至 此 为 止 ，EXT 2.1 中 的 所 有 更 新 都 已 介绍 完了 ， 接 下 来 我 们 看 看 EXT 2.2 中 的 更 新 。 


G3 EXT2.2 


EXT 2.2 的 主要 更 新 如 下 所 示 。 

口 完全 支持 Firefox 3.0 

0 添加 了 Ext .History 组 件 和 示例 

口 完全 重 构 复 选 框 和 单 选 杠 

D 添加 了 CheckboxGroup 和 RadioGroup 组 件 以 及 示例 
D 添加 了 多 选 框 和 ItemSelector 扩 展 以 及 示例 
口 添加 了 文件 上 传 组 件 和 示例 

口 添加 了 XmlTreeLoader 扩 展 和 示例 

口 添加 了 一 些 新 的 拖 放 示例 

D 添加 了 GMapPanel 扩 展 和 示例 

D 提升 了 表格 的 性 能 

口 补充 文档 内 容 

D 更 新 不 同 的 国际 化 文件 


C.3.1 添加 Ext .History 组 件 和 示例 


Ext .History 组 件 提供 了 记忆 浏览 历史 的 功能 ， 在 Ajax 中 本 来 无 法 使 用 浏览 器 的 “后 退 ” 和 和 
“前 进 ” 按 钮 。 有 了 Ext .History 后 ， 我 们 可 以 把 页 面 上 的 组 件 注册 到 Ext .History 里 ， 使 用 浏 
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览 器 的 “后 退 ” 和 “前 进 ” 按 钮 控制 历史 操作 。 
Ext ,History 的 使 用 步骤 如 下 所 示 。 
(1) 做 准备 工作 
首先 在 HTML 中 加 上 input 和 iframe 标 签 ， 供 Ext.History 使 用 。 
<form id="history-form" class='"x-hidden*"> 
<input type="hidden" id="x-history-field" /> 


<iframe id="x-history-frame"></iframe> 
</form> 


然后 在 JavaScript 中 对 Ext . History 进 行 初始 化 ， 如 下 所 示 。 


Ext .History.init(); 


因为 input 和 iframe 的 标签 都 使 用 了 默认 值 ， 所 以 初始 化 时 不 需要 设置 fieldId 和 
iframeId。 
(2) 创建 一 个 Ext .window， 监 听 移 动 事 件 ， 把 移动 事件 加 入 到 Ext .History 中 作为 记录 ， 如 
下 所 示 。 
Var win = new Ext .Window!(l{ 
title: 'window', 
width: 300, 
height: 100 
1)3 


win.on('move', function(component, x, y) { 
Ext .History.add (x + "," + y); 
}) : 


在 监听 事件 的 函数 中 ， 每 当 win 发 生 移 动 时 ， 就 把 xz 坐标 和 ?坐标 保存 到 Ext .History 中 。 
监听 Ext .History 的 change 事 件 ， 在 浏览 器 后 退 或 前 进 时 修改 win 的 位 置 ， 如 下 所 示 。 
Ext .History.onf'change'，Eunction(token) { 
if {token) { 
var position = token.split(",*); 
win.setPagePosition{position[0], position[1]); 
} 
}); 
token 就 是 保存 到 Ext .History 中 的 历史 记录 ， 我 们 保存 的 格式 是 "x,y" 的 字符 串 ， 处 理 时 
先 把 token 切 分 成 两 段 , 获得 对 应 的 x 坐 标 和 ?坐标 , 然后 再 调用 setPagePosition() 函数 修改 win 
的 位 置 。 
经 过 上 述 步 又 后 ， 我 们 就 可 以 在 拖 动 窗口 之 后 使 用 浏览 器 的 “后 退 ” 和 “前 进 ” 按 钮 控制 窗 
口 的 历史 了 。 
示例 在 2.2/1-history.html 中 。 


C.3.2 ”完全 重 构 复 选 框 和 单 选 杠 
EXT 2.2 里 重 写 了 Ext. form.Checkbox 和 PExt.form.Radio， 现 在 这 两 个 组 件 变 得 非常 漂亮 
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了 如 图 C-14 所 示 。 Ms st 
幸运 的 是 ， 需 要 修改 的 部 分 只 涉及 显示 效果 ， 继 承 结构 chedboxl: 问 

和 主要 API 都 没有 发 生 改 变 。Ext .form.Ccheckbox 中 专门 添 poe 

加 了 一 系列 用 来 控制 显示 效果 的 属性 ， 可 以 通过 自 定 义 CSS ei i 

来 控制 复 选 框 和 单 选 框 的 显示 方式 。 


checkedCls、focusCls、mouseDownCls 和 overCls 分 图 C-14 ”新 版 本 的 复 选 框 和 单 选 框 
别 用 来 指定 对 应 状态 下 的 CSS 样 式 。 
下 面 的 是 生成 复 选 框 和 单 选 框 的 代码 : 


Var form = new Ext.form.FormPpanel l(t 

title: 'form', 

frame: true, 

items: [{ 
xtype: 'checkbox', 
name: 'checkboxl', 
fieldbLabel: ‘checkbox1l' 

By 下 
xtype: ‘checkbox', 
name: 'checkbox2', 
fieldLabel: 'checkbox2' 

5 
xtype: ‘radio', 
name: 'radio', 
fieldLabel: '‘'radiol' 

}y. 1{ 
xtype: ‘radio', 
name:; ‘radio', 
fieldLabel: ‘radio2"' 

}] 

}); 


C.3.3 添加 CheckboxGroup 和 RadioGroup 组 件 及 其 示例 


CheckboxGroup 和 RadioGroup 的 出 现 ， 给 广大 开发 者 带 来 了 惊喜 ， 现 在 我 们 可 以 为 复 选 框 和 
单 选 框 实现 各 种 复杂 的 排列 方式 了 ， 如 下 所 示 。 

1. 默认 排列 方式 〈 横 排 ) 

以 前 无 法 直接 让 复 选 框 和 单 选 框 横向 排列 , 即便 是 使 用 columnLayout， 实现 过 程 也 很 复杂 。 
现在 有 了 CheckboxGroup 和 RadioGroup， 默 认 的 排序 方式 就 是 横 排 了 ， 如 图 C-15 所 示 。 


自动 入 局 : 问 Item 1 Biltem 2 Ej1tem 3 站 Item 4 问 Item 5 
图 C-15 ”CheckboxGroup 的 默认 排序 方式 


实现 过 程 如 下 面 的 代码 所 示 : 


{ 
xtype: 'checkboxgroup', 
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fieldLabel: “自动 布局 ' ， 
items: [ 
{boxbLabel: 'Item 1', name;:; ‘cb-auto-1'}, 
{boxLabel: ‘'Item 2', name: 'cbh-auto-2', checked: true}), 
{boxLabel: 'Item 3', name: ‘cb-auto-3'}, 
{boxLabel: 'Item 4', name: ‘cb-auto-4'}, 
{boxLabel; 'Item 5', name: 'cb-auto-5'} 
] 
} 
2. 竖 直 排列 方式 
如 果 还 是 希望 使 用 竖 排 的 形式 ， 则 需要 设置 column 属 性 ， 效 果 如 图 C-16 所 示 。 
单列 : ‘TItem 1 
遍 }termn 2 
”em 
图 C-16 ”CheckboxGroup 的 竖 排 方式 
实现 过 程 如 下 面 的 代码 所 示 : 
{ 
xtype: 'checkboxgroup ' ， 
fieldLabel: :单列 '， 
itemCls: 'x-check-group-alt', 
columns: 1, 
items: I[ 
{boxLabel: 'Item 1', name: ‘cb-col-1'}, 
{boxLabel: 'Item 2', name: ‘'cb-col-2', checked: 
{boxLabel: 'Item 3', name: 'cb-col-3'} 
] 
} 
3. 多 列 排列 方式 
既然 可 以 指定 单列 ， 也 就 可 以 指定 多 列 ， 如 图 C-17 所 示 。 
多 列 ( 水 平 》; Item 1 [| Item 2 | Iteny3 
“|Item 4 | Item 5 
图 C-17 CheckboxGroup 多 列 排列 方式 
实现 过 程 如 下 面 的 代码 所 示 : 
{ 
xtype: 'checkboxgroup', 
fieldLabel: ' 多 列 (水 平 ) '， 
columns: 3, 
items: [ 
{boxLabel: 'Item 1', name: 'cb-horiz-1'}, 
{boxLabel: 'Item 2', name: 'cbh-horiz-2', checked: 
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{boxLabel: 
{boxLabel: 
{boxLabel: 


} 


上 例 中 ， 子 元 素 是 按 行 水 平 排列 的 ， 也 可 以 设置 成 按 列 垂直 排列 ， 如 图 C-18 所 示 。 
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‘cb-horiz-3'), 
‘cb-horiz-4'}, 
‘cb-horiz-5'} 


‘Ttem 3', name: 
‘Item 4', name: 
'Item 5', name: 


剂 C 直 7 ltemi 全 | 了 en Filterm 5 
viltem 2 Fiem4 
图 C-18 CheckboxGroup 列 优先 排列 方式 
实现 过 程 如 下 面 的 代码 所 示 : 
{ 
xtype: 'Checkboxgroup ' ， 
fieldbLabel: ' 多 列 ( 竖 直 ) ，， 
itemCls: 'x-check-group-alt', 
columns: 3, 
vertical: true, 
items: [ 
{boxLabel: 'Item 1', name: ‘'cb-vert-1'}, 
{boxLabel: 'Item 2', name: ‘cb-vert-2', checked: true}, 
{boxLabel: 'Item 3', name: ‘'cb-vert-3'}, 
{boxLabel: 'Item 4', name: 'cbh-vert-4'}), 
{boxLabel: 'Item 5', name: 'cb-vert-5') 


} 
4. 自 定义 多 列 排列 方式 


也 可 以 根据 需要 自 定义 多 列 ， 效 果 如 图 C-19 所 示 。 


Rem 4 
”Item 5 


图 C-19 CheckboxGroup 自 定义 多 列 排列 方式 


多 列 由 em 1 
《 自 定义 ) ; 人 
说 | 1tem 2 
[ltem 3 
{ 
xtype: 'checkboxgroup', 


fieldLabel: ' 多 列 <br />〔 自 定义 ) '， 

columns: [100, 100], 

vertical: true, 

items: [ 
{boxLabel: ‘Item 1', name: 'cb-custwidth', inputValue: 1}, 
{boxLabel: 'Item 2', name: ‘cb-custwidth', inputValue; 2, checked: 
true)}, 
{boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3}, 
{boxLabel: ' Item 4', name: ‘cb-custwidth', inputValue: 4}, 
{boxLabel: 'Item 5', name: 'cb-custwidth’', inputValue: 5} 
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} 


columns 部 分 定义 的 是 高 度 和 宽度 ， 也 可 以 使 用 百分比 来 表示 。 
5. 自 定义 布局 排列 方式 
还 可 以 使 用 自 定义 布局 排列 方式 ， 如 图 C-20 所 示 。 


自 定义 布局 ; Heading Heading 2 Ha 全 
让 emi 注 IDPng item just for fn ter 4 
Fitem 2 "|WRems 


图 C-20 ”CheckboxGroup 自 定义 布局 


实现 过 程 如 下 面 的 代码 所 示 : 


{ 
xtype: "checkboxgroup ' ， 
itemCls; 'x-check-group-alt'， 
fieldLabel: ' 自 自 定义 布局 '， 
allowBlank: false, 
anchor: '95%°', 


items: [t 
columWidth; '.25°', 
items: { 


{xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-— 
label', anchor:'-15'}, 
{boxLabel: 'Item 1', name: 'cb-cust-1'}, 
{boxLabel: 'Item 2', name: ‘cb-cust-2'} 
] 


} ,1{ 
columnWidth: '.5', 
items: [ 
{xtype: 'label', text: 'Heading 2', cls:'x-form-check-group- 
label', anchor:'-15'}, 
{boxLabel: 'A long item just for fun', name: ‘cbh-cust-3'} 
] 
}i{ 


columnwidth: '.25°', 
items: [ 
{xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-— 
label', anchor:'-15')}, 
{boxLabel: 'Item 4', name: 'cb-cust-4'}, 
{boxLabel: 'Item 5', name: 'cb-cust-5')} 


} 


还 可 以 在 组 中 使 用 子 布局 ， 从 而 实现 更 复杂 的 布局 。 
RadioGroup 与 CheckboxGroup 的 情况 完全 相同 ， 图 C-21 是 RadioGroup 的 显示 效果 。 
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radio group 
自动 布局 Item 1 Item 2 i Item 3 Item 4 ltem 5 
单列 ; ) Hem 1 
» Item 2 
Item 3 
多 列 ( 水 平 》; Item 1 各 ltem 2 tem 3 
Item 4 Item 5 
多 列 ( 坚 直 ) ; ltem 1 Htem 3 item 5 
SB ltem 2 ltem 4 
多 列 Item 1 ) Item 4 
A Item 2 Ttem 5 
item 3 
自 定义 大 网 Heading 1 Heacine 2 Heading 3 
Ken 1 A iong tem jast -for fe ftem 4 
) Ram 2 Ktem 5 


图 C-21 RadioGroup 的 各 种 布局 效果 


C.3.4 ”添加 多 选 框 和 ltemSelector 扩展 以 及 示例 


Ext 2.2 中 的 多 选 框 (MaultiSelect) 和 ItemSelector 都 是 扩展 控件 ， 需 要 在 HTML 中 引入 对 应 的 
MultiSelect.js 和 Itemselector .js， 然 后 才能 使 用 。 

多 选 框 是 为 了 补充 Combo 中 没有 实现 的 多 选 功能 ， 效 果 如 图 C-22 所 示 。 

为 了 使 用 多 选 框 ， 我 们 要 先 为 HTML 引 入 对 应 的 CSS 和 JavaScript 文 件 ， 如 下 所 示 。 


<link rel="stylesheet" type="text/css" href=",./../ux/css/multiselect.css"/> 
<script type="text/javascript" src="../../ux/css/MultiSelect.js"></script> 


志 诸 框 : One Hundred Twenty Three 2 


划 
图 C-22 ”多 选 控件 的 显示 效果 
然后 使 用 与 Combo 相 似 的 语法 创建 多 选 框 ， 如 下 所 示 : 


var form = new Ext.form.FormPpanell(t{ 
title: ‘Multi Select', 


Download at Pin5i.Com 


http://52pdf.taobao.com 


478 附录 C EXT 的 版 本 变迁 


frame: true, 
width: 600, 
items: [{ 
xtype: "multiselect", 
fieldLabel:* 多 选 框 *， 
narme:n"ImulLtiselect"， 
dataFields:["code"，"desc"]， 
valueField: "code", 
displayField: "desc", 
width:250, 
height :200, 
allowBlank:false, 
data: [[123, "One Hundred Twenty Three"], 
("1", "One"],["2°, *Two"],["3", "Three")],{[*4*, “Four"], ["5*, *Five"], 
["6", "Six"], ["7", "Seven"’], ["8", "Eight"], ["*9"*, "Nine"]] 
}] 
上 


ItemSelector 也 是 很 常用 的 一 种 多 选 排 列 组 件 ， 效 果 如 图 C-23 所 示 。 


OO ee 


ltem Selector 
IternSelector; Available Selected 
One Hundred Twenty Three 此 Ten 


8 
aiglaialialz 


Eight 到 
图 C-23 ”ItemSelector 的 显示 效果 


它 支 持 左右 移动 、 上 下 移动 、 全 选 、 清 空 、 移 动 到 顶部 和 底部 等 操作 。 因 为 在 它 的 内 部 使 用 
了 多 选 框 ， 所 以 要 将 多 选 框 需要 的 外 部 CSS 和 JavaScript 都 添加 到 HTML 中 ， 如 下 面 的 代码 所 示 ; 


<link rel="stylesheet" type="text/css" href="../../ux/css/multiselect.css"/> 
<script type="text/javascript" Src="../../Uux/css/MultiSelect.js"></script> 
<Sscript type="text/javascript" Src=",./../UxX/css/ItemSelector.js"></script> 


示例 代码 如 下 所 示 : 


Var form = new Ext.form.Formpanel(f 

title: ‘Item Selector', 

frame: true, 

width: 600, 

items: [{ 
xtype: "itemselector", 
name:"Item Selector", 
fieldLabel:"ItemSelector", 
dataFields:["code", "desc"], 
topatas CL"*"10" "Ten”]}}; 
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mswWidth:250, 

msHeight:200, 

valueField: "code", 

displayField: "desc", 

imagePath:" ../../ux/images/", 

toLegend: "Selected", 

fromLegend: "Available"， 

fromData: [[123, "One Hundred Twenty Three"], 
t*i*,"One"], ["2"; "Two"],["3", "Three"],["4","Four"]; ("S$","Five"], 
["6", "Six*], ["7", "Seven"], ("8"*, "Eight"], ["9", “Nine"]], 

}] 
上 


C.3.5 ”添加 文件 上 传 组 件 和 示例 


FileUploadField 是 美化 了 的 文件 上 传 选择 控件 ， 它 让 之 前 简陋 的 input type="file" 更 接近 
EXT 的 整体 风格 ， 效 果 如 图 C-24 所 示 。 


Fite Upload Field 


上 传 , firefox wi rm Browse,, 


图 C-24 文件 上 传 控 件 的 显示 效果 
为 了 使 用 它 ， 我 们 还 是 要 加 入 额外 的 CSS 和 JavaScript 文 件 。 


<link rel="stylesheet" type="text/css" href=",./../ x/fileuploadfield/css/fileuploadfield.css"/> 
<script type="text/javascript" src="../../ux/fileuploadfield/FileUploadField.js"></script> 


注意 , 使 用 FileUploadField 时 ,不 要 忘记 为 表单 设置 fileUpload:true, 如 下 面 的 代码 所 示 : 


Var form = new Ext.form,.FormPanell(l 
title: 'File Upload Field', 
fileUpload: true, 
frame: true, 
width: 400, 
items: [{ 

xtype: "fileuploadfield", 
fieldLabel:" 上 传 "， 
name: "fileuploadfield" 
}] 
jE 


C.3.6 添加 xmlTreeLoader 扩展 和 示例 


以 前 TreeLoader 异 步 加载 节 点 信息 只 支持 JSON 格 cB 
式 的 数据 ， 现 在 用 xmlTreeLoader 也 可 以 读 取 XML 格 式 E ee a ee 
的 数据 了 。 读 取 XML 数 据 的 xmlTreeLoader 的 最 终 显 示 node S 
效果 如 图 C-25 所 示 。 习 node3 

首先 在 HTML 中 添加 XmlTreeLoader .js 的 引用 ,如 Ed 
be 最 终 显示 效果 
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<script type="text/javascript" src="../../ux/XmlTreeLoader,ijs"></script> 


然后 制作 一 个 为 树 提供 数据 的 XML 文 件 ， 如 下 所 示 : 


<root> 
<node text="node 1"> 
<sub text="sub node 1" leaf="true"/> 
</node> 
<node text="node 2" leaf="true"/> 
<node text="node 3" leaf="true"/> 
</root> 


最 后 在 JavaScript 中 使 用 xmlTreeLoader 读 取 数 据 ， 如 下 所 示 :; 


Var tree = new EXt.tree.TreepPanel(({ 
autoHeight: true, 
loader: new Ext .ux.XmlTreeLoader({ 
dataUrl: '6-xmltreeloader .xml', 
processAttributes : function(attr)}t 
if {attr.tagName == 'node') ({ 
attr.loaded = true,; 
} 
} 
Ps 
root: new Ext,.tree.AsyncTreeNodel{{ 
text: ‘root’" 
}) 
) 


dataUr1 表 示 从 '6-xmltreeloader .xml' 获 取 数 据 ，processAttributes 用 于 在 读 取 数据 
之 后 ， 先 由 用 户 处 理 ， 然 后 再 创建 树 节点 ， 我 们 为 所 有 tagName="node" 的 节点 设置 了 loaded: 
true 属 性 ， 这 些 XML 中 的 节点 会 对 应 生成 叶子 节点 ， 避 免 出 现 循环 加 载 。 
C.3.7 添加 GMapPanel 扩展 和 示例 

EXT 2.2 里 还 提供 了 





难 Siariey 及 Rirger 
区 Piaygrouind Alston C30) 


- 诺 Minot Park’ 
whton 2 A 
六 


$ % 
BR 各 : (9) ey 

ps : 
Coglew 总 图 冰 吉 P64006 Tele las “全 用 床 分 


图 C-26 与 Google Map 整 合 的 显示 效果 
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首先 要 把 Google Map 的 引用 链接 和 GMapPanel .js 加 入 HTML 中 ， 如 下 所 示 : 


<script src="http://maps.google.com/maps?file=api&amp;V=2 .x&amp’; Key= 
ABQIAAAAJDLV3q8BFBryRorw-851MRT2YXpP_ZAY8_UufC3CFXhHIElINvwkxTyuslsNlFqyphYqv 
1PCUD8WrZA2A" type="text/javascript"></script> 

<Sscript src="../../Uux/Ext.ux.GMapPanel .js"></script> 


下 面 是 Ext .ux .GMapPanel 的 引用 , 有 了 这 些 就 可 以 使 用 Ext .ux.GMapPanel 了 ,如 下 所 示 ; 


Var panel = new Ext,ux.GMapPaneliT{ 
zoomLevel: 14, 
gmapType: 'map', 
mapConfOpts: ['enableScrollWheelZoom', ‘enableDoubleClickzZoom', 
'enableDragging'], 
mapControls: ['GSmallMapControl', 'GMapTypeControl','NonExistantControl'], 
setCenter: ({ 
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA'’, 
marker: {title: 'Fenway Park'} 
}; 
markers: [{ 
lat: 42.339641, 
lng: -71.094224, 
marker: {title: ‘Boston Museum of Fine Arts'}, 
listeners: 1{ 
click: function(e)t{ 
Ext .Msg.alert('its fine', '‘'and its art.'); 
} 
} 


lat: 42.339419, 
lng: -71.09077, 
marker: {title: 'Northeastern University'} 
}] 
}); 


C.4 EXT 2.2.1 


EXT 2.2.1 的 主要 更 新 如 下 所 示 。 
口 提供 对 Chrome 的 支持 
D 解决 了 一 些 内 存 泄露 问题 


口 为 Ext .Container 添 加 了 removeAll 1() 


D 为 air 提 供 了 很 多 新 的 组 件 


C.4.1 提供 对 Chrome 的 支持 


从 官方 提供 的 更 新 列表 来 看 ， 只 有 在 Ext .js 中 添加 了 Ext .isIE8 和 Ext .ischrome， 这 就 可 
以 直接 使 用 这 两 个 属性 判断 当前 使 用 的 浏览 器 是 否 为 IE8 或 Chrome 了 。 

在 页 面 进行 初始 化 时 ，Ext .EventManager .js 为 BODY 标 签 设 置 名 为 ext-chrome 的 CSS 
样式 。 
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再 看 ext-base.js 和 ext-all.js 中 的 代码 ， 就 只 有 ext-base.js 中 包含 了 对 Ext .ischrome 的 判断 ， 也 
许 是 因为 Chrome 和 FireFox 太 相似 了 么 ? 反正 结论 是 这 条 更 新 实在 是 没 多 少 内 容 。 


C.4.2 解决 了 一 些 内 存 泄露 问题 


EXT 会 导致 内 存 泄 露 ， 页 面 中 使 用 了 EXT， 浏 览 器 的 内 存 就 会 越 占 越 多 。 这 个 问题 导致 县 前 
不 少 项 目 不 敢 使 用 one page on application 的 方式 ， 而 是 在 页 面 中 髓 套 上 IFRAME， 用 这 种 方式 避 
免 同 一 页 面 产 生 过 多 JavaScript 对 象 的 问题 。 

在 此 之 前 , 有 人 提出 过 EXT 中 的 内 存 泄 露 是 因为 事件 模型 设计 上 的 问题 造成 监听 函数 占用 的 
内 存 无 法 释放 ， 也 有 人 提出 了 解决 内 存 泄 露 的 方案 。 现 在 EXT 官 方 终于 放 话 说 解决 内 存 泄 串 了 。 

我 们 使 用 Ctrl + 在 更 新 列表 上 只 能 找到 两 个 与 内 存 相关 的 项 目 。 

(1) [Extform.TextField] - [Fixed minor memory leak when using autoSize.] 

比较 EXT2.2 和 EXT2.2.1 中 source/widgets/form 目 录 下 的 TextField.js 人 代码。 发 现在 autosize() 
这 个 函数 的 第 397 行 多 了 一 句 Ext .removeNode (d) 。 这 里 被 删除 的 变量 a 是 在 autosize{) 函数 中 
创建 的 一 个 DIV 节点 。 它 的 用 处 是 在 修改 rextField 大 小 的 时 候 ， 先 将 TextField 的 值 作为 -一 个 
文本 节点 放 到 DIV 中 , 然后 再 获得 DIV 中 的 innerHTML, 以 此 来 实现 对 转 义 字符 的 转换 。 而 在 EXT 
2.2 中 ， 在 a 使 用 完 之 后 ， 仅 仅 使 用 了 a = nu1l1; 这 样 的 方式 来 告诉 浏览 器 需要 进行 内 存 回收 了 。 
现在 EXT 2.2.1 中 添加 了 Ext .removeNode (qd) 应 该 是 显 式 地 告诉 浏览 器 把 这 个 节点 删除 掉 。 以 此 
来 解决 内 存 泄露 的 问题 。 

再 去 看 一 下 source/core/Ext.js 中 的 removeNode () 函数 ， 发 现 原来 在 这 里 IE 和 其 他 浏览 器 是 
被 区 别处 理 的 ,如 果 是 在 非 正 浏览 器 下 , 如 果 这 个 节点 有 父 节点 ,就 调用 父 节 点 的 zemovechild1) 
函数 删除 该 节点 。 我 们 上 面 讨 论 到 的 pzV 节 点 是 新 创建 出 来 的 ,还 没有 放 到 页 面 中 ,所 以 在 非 IE 
浏览 器 下 ， 新 增 这 段 removeNode () 是 不 会 起 任何 作用 的 ， 这 样 我 们 的 焦点 就 集中 在 了 IE 浏览 
器 下 。 

在 IE 浏览 器 下 ，Ext .removeNodae () 函数 的 内 容 如 下 ; 


function(){ 


var d; 
return function(n})f{ 
if{n && n.tagName != 'BODY')T{ 
d=d || document.createElement('div'); 


d.appendChildl(n); 
d.innerHTML = ''; 


} 
D0)3 


它 这 里 先 在 外 部 定义 了 一 个 临时 变量 a， 这 样 所 有 的 节点 删除 操作 都 可 以 共用 这 一 个 Drv 标 
签 了 ， 然 后 媒 套 的 函数 内 部 利用 延迟 加 载 ， 如 果 a 还 没 初始 化 就 创建 一 个 DIV 标 签 来 用 。 

接 下 来 就 是 IE 中 删除 节点 的 方法 了 , 我们 要 先 把 需要 删除 的 节点 放 到 这 个 共用 的 DIV 标 签 中 ， 
然后 调用 a. innerHTML = '' ;进行 删除 。 

感觉 这 样 做 似乎 多 此 一 举 ， 可 如 果 你 把 下 面 这 段 代码 放 到 IE 下 多 执行 几 遍 ， 就 会 发 现 内 存 以 


Download at Pin5i.Com 


http://52pdf.taobao.com 


附录 C ”EXT 的 版 本 变迁 483 


每 次 几 十 KB 的 速度 慢 慢 增长 。 而 且 在 函数 的 最 后 添加 上 removeNode () 就 可 以 解决 IE 浏 览 器 下 的 
内 存 泄露 。 
<script type="text/javascript"> 
removeNode = function(){ 
Var d; 
return function(n)l{ 
if(n && n.tagName != 'BODY'){ 
d= d || document.createElement{'div'); 
d.appendChild(n); 
d.innerHTML = ''; 


} 
}(); 


function test() { 
Var Vs yy 
var d = document .createElement ('div'); 
d.appendChild(document .createTextNode (V) ) ; 
Vv = d.,innerHTML; 
//removeNode (Gd) ; // 测试 解决 内 存 泄 露 的 情况 ， 可 以 去 掉 这 行 的 注释 
d= DLL; 
//alert(v); 
} 
</script> 


<button onclick="test()">button</button> 


(2) [Ext.tree.AsyncTreeNode] - [Fixed a memory leak when reloading a node.] 

比较 EXT 2.2 和 EXT 2.2.1 中 source/widgets/tree 目 录 下 的 AsyncTreeNode.js 代 码 ， 发 现 只 有 104 
行 存 在 改动 。 这 行 代码 在 EXT 2.2 中 是 this .removechild(this.firstchild)， 在 EXT2.2.1 中 
改 成 了 this.removechild(this.firstchild) .destroy() 。 在 语句 最 后 增添 了 一 个 
destory() 函数 ， 意 思 应 该 是 将 刚刚 删除 的 第 一 个 节点 销 筑 ， 释 放 内 存 。 

由 于 Ext .tree.AsyncTreeNode 继 承 自 Ext .tree.TreeNode, 而 Ext .tree.TreeNode 又 继 
承 自 Ext .data.Node， 所 以 这 个 this .removechild() 函数 的 具体 实现 还 要 去 Ext .data.Node 
里 去 找 。 翻 开 Ext .data .Node 的 源 代码 ,看 到 的 只 是 在 数据 结构 上 删除 了 对 应 的 节点 ， 并 重新 计 
算 第 一 个 节点 和 最 后 一 个 节点 的 引用 , 里 面 没 有 删除 节点 释放 内 存 的 功能 ， 这 时 我 们 突然 想到 树 
形 中 所 有 的 节点 在 演 染 后 都 由 一 个 ui 组 件 与 内 存 中 的 数据 模型 相对 应 ， 实 际 中 删除 节点 的 功能 应 
该 是 在 ui 组 件 中 实现 的 。 

Ext .tree.AsyncTreeNode 并 没有 定义 自己 的 destroy() 销 数 ， 它 继承 了 Ext.tree. 
TreeNode 中 定义 的 destory () 函数 ， 在 Ext .tree.TreeNode 的 destory() 函 数 中 首先 调用 所 有 
子 节点 的 destory () 函数， 然后 判断 是 否 存 在 this .ui .destory() 这 个 函数 ， 如 果 当 前 节点 对 
应 的 ui 支持 destory () 函数 ， 就 调用 destory () 函数 销毁 ui 释放 内 存 。 

实际 销毁 ui 的 aestory() 函数 可 以 在 Ext .tree.TreeNodeUI 中 找到 。 


destroy : function()t{ 
if{this,.elNode)! 
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Ext .dd.Registry.unregister(this.elNode.id); 
} 
delete this.elNode; 
delete this.ctNode; 
delete this.indentNode; 
delete this.ecNode; 
delete this.iconNode; 
delete this.checkbox; 
delete this.anchor:; 
delete this.textNode; 


if (this.holder}t{ 
delete this.wrap; 
Ext .removeNode (this.holder):; 
deletre this.holder; 
}elsel{ 
Ext .removeNode (this .wrap); 
delete this.wrap; 
} 
} 


如 上 述 代码 所 示 ， 首 先 从 拖 昌 注册 中 删除 节点 的 注册 信息 ， 然 后 依次 删除 elNoae、ctNode、 
indentNode、ecNode、iconNode、checkbox、anchor、textNode 这 些 节 点 ， 最 后 删除 this. 
holder 和 this .wrap。 

这 样 来 看 ，EXT 之 前 的 做 法 也 太 大 意 了 ， 竟 然 在 reload() 的 时 候 没 有 删除 这 些 节 点 ， 不 出 
内 存 泄 露 才 叫 奇怪 了 呢 。 想 再 现 这 个 问题 ， 只 要 创建 一 个 rreePanel， 然 后 不 断 执 行 
rootNode.reload() 就 可 以 看 到 内 存 毅 升 了 。 


C.4.3 为 Ext .Container 添加 了 removea11() 函数 


Ext .Container 里 多 了 一 个 removeA1l1l() 函 数 ， 现 在 我 们 可 以 一 次 性 删除 容器 里 所 有 的 组 
件 了 。 它 还 可 以 使 用 一 个 autoDestroy 参 数 ， 如 果 传 入 一 个 true， 就 会 在 删除 容器 内 组 件 的 同 
时 把 这 些 组 件 销毁 掉 。 

从 代码 上 来 看 ， 这 只 是 添加 了 一 个 不 怎么 复杂 的 函数 而 已 ， 但 是 因为 太 多 组 件 都 是 继承 自 
Ext .Container， 为 Ext .Container 添 加 函数 ， 无 形 中 等 于 为 所 有 继承 自 Ext .container 的 组 
件 都 增加 了 这 个 可 以 清空 内 部 组 件 的 功能 ， 所 以 EXT 开 发 团队 也 把 它 单独 列 为 一 项 重要 的 更 新 。 

最 容易 演示 的 实例 就 是 使 用 Ext .Panel， 我 们 先 在 Ext .Panel 里 设置 4 个 Panel， 然 后 调用 
removeAll () 函数 把 这 4 个 Panel 一 次 删除 掉 ， 如 以 下 代码 所 示 ; 


var Panel = new Ext.Panellt 


items: [{ 

站 
次 { 

html: '2° 
2: 

html: ‘'3' 
{ 

html: :4 


}] 
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}); 
panel .render{('panel'); 


Ext .get('button') .on('click', function{) { 
panel .removeAll (); 
人 


C.4.4 为 AIR 提供 了 很 多 新 组 件 


1. Ext .sql .SQLLiteStore 

支持 操作 数据 库 的 简易 store。 

在 此 之 前 我 们 想 要 从 本 地 数据 库 获 得 数据 ， 就 只 能 自己 定义 一 个 store 类 型 ， 现 在 EXT 为 我 
们 提供 了 一 个 封装 好 的 类 ,只 要 我 们 把 必须 的 参数 传递 进去 ， 它 就 会 自动 帮 我 们 完成 数据 库 的 连 
接 配 置 。 如 果 数 据 表 不 存在 ， 还 会 帮 咱 们 自动 建立 好 表 关 系 。 使 用 起 来 也 十 分 简单 。 


Var Store = new Ext.sql.SQLiteStoret{t 
GbFile: ‘ext .db', 
tableName: ‘'user', 
key: 'userId', 
fields: User 


Fs 
需要 传递 的 参数 有 本 地 数据 库 文件 dbFile、 数 据 表 名 tableName、 表 中 的 主键 key 和 表 中 字 
段 的 定义 fields。 这 些 参数 都 是 缺 一 不 可 的 ， 偷 懒 省 掉 任何 一 个 参数 都 会 导致 异常 。 
这 里 的 qbFile 参 数 中 指定 的 文件 并 不 一 定 要 预先 创建 好 ， 如果 文 件 不 存在 AIR 会 自动 为 我 
们 生成 一 个 文件 的 。 剩 下 的 就 可 以 像 从 前 一 样 操作 我 们 的 store 了 。 我 们 的 例子 中 演示 的 是 如 何 
在 表格 中 使 用 这 个 sQLitestore。 
2. Ext .air .App 
提供 了 一 个 便捷 的 途径 来 创建 一 个 应 用 。Ext .air.App 是 一 个 单 例 ， 不 需要 使 用 new 创 建 创 
建 实例 就 可 以 直接 使 用 ， 它 为 我 们 提供 了 两 个 函数 。 
D launchonStartup (true) 会 调用 air.NativeApplication.nativeApplication. 
startAtLogin=true， 在 用 户 登录 的 时 候 启动 应 用 程序 。( 注 ， 可 能 是 在 AIR 安 装 到 系统 
之 后 ， 可 以 设置 自动 启动 的 选项 吧 。) 
D getactivewindow() 将 返回 当前 活动 的 air 窗 口 。 但 是 使 用 AIR 1.5.1(winxp) 测 试 的 时 候 
一 直 说 “Error #2014: Feature is not available at this time.”, 查 了 一 下 官方 文档 ， 意 思 是 这 
项 功能 在 当前 系统 上 还 不 支持 。 


Ext .air.App.launchOonstartup (true) ; 
alert (Ext .air.App.getaActiveWindow()); 


3 Ext .air .Clipboard 
可 以 使 用 操作 系统 的 前 贴 板 中 的 信息 ， 也 可 以 把 特定 格式 的 信息 放 到 系统 前 贴 板 中 。 


Ext .air.Clipboard.setData('air:text', ‘text data' ),， 
var data = Ext .air.Clipboard.getData('air:text', 'originalPreferred'); 
alert (data); 
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使 用 setpata1() 函数 向 剪贴 板 中 复制 数据 的 时 候 要 先 指定 数据 的 格式 ，AIR 现 在 支持 的 数据 
格式 如 下 所 示 。 
QO air.ClipboardFormats .TEXT_FORMAT - 'air:text' 
O air.ClipboardFormats.HTML_FORMAT - “air:html， 
O air.ClipboardFormats.RICH_TEXT_FORMAT - ‘air:rtf' 
OD air.ClipboardFormats.URL FORMAT - 'air:url' 
OQ air.ClipboardFormats.FILE_ LIST_FORMAT — 'air:file list' 
OQ air.ClipboardFormats .BITMAP FORMAT - ‘'air:bitmap' 
在 使 用 getpata() 函数 从 前 贴 板 中 获取 数据 的 时 候 ， 不 但 要 指明 数据 类 型 ， 还 需要 设置 数据 
传输 模式 。AIR 现 在 支持 的 传输 格式 如 下 所 示 。 
Dair.ClipboardTransferMode .CLONE_ONLY - 'cloneonly'， 只 返回 源 数据 的 副本 。 
D air.ClipboardTransferMode.CLONE_PREFERRED - 'clonePreferred'， 如 果 前 贴 
板 可 以 返回 源 数 据 的 副本 ,: 就 返回 副本 ， 否 则 返回 源 数据 的 引用 。 
口 air.ClipboardTransferMode .ORIGINAL_ONLY -'originalonly'， 只 返回 源 数据 的 
引用 。 
D air.ClipboardTransferMode .ORIGINRAL_ONLY - 'originalPreferred '， 如 果 前 贴 
板 可 以 返回 源 数据 的 引用 ， 就 返回 引用 ， 和 否则 返回 源 数据 的 副本 。 
这 里 还 是 遇 到 了 问题 ， 使 用 setpata() 函数 的 确 可 以 把 数据 保存 到 系统 剪贴 板 中 ,在 记事 本 
中 使 用 Ctrl + V 可 以 看 到 刚刚 放 到 剪贴 板 中 的 数据 ， 但 是 使 用 getpata() 却 无 论 如 何 也 得 不 到 前 
贴 板 中 的 内 容 ， 总 是 显示 'undefined '。 
4. Ext .air.Debug 
这 是 一 个 十 分 方便 的 提示 函数 ， 可 以 把 调试 数据 显示 到 AIR 的 控制 台中 。 它 支持 两 个 参数 ， 
第 一 个 参数 是 需要 输出 的 对 象 ， 第 二 个 参数 是 调试 信息 前 面 留 出 的 缩 进 数 ， 每 个 缩 进 都 是 一 个 制 
表 符 (tab) 的 距离 。 实 例 代 码 如 下 : 


BRE aAdr-dirl elicR,,. SII 
Ext .air.dir({ 


}, 2); 


在 使 用 中 发 现 了 一 个 问题 ， 那 就 是 EXT 总 是 把 第 一 个 参数 当做 对 象 ， 即 使 第 一 个 参数 的 类 型 
是 字符 串 ， 它 也 会 把 它 分 拆 成 好 几 部 分 进行 显示 。 因 此 Ext.air.dair('click'，1); 就 显示 成 
了 下 面 这 样 : 


324 
4: 
toggle: function {b, a) {return this==b?a:b} 
trim: function () {return this.replace(la,"")} 


tD 
nnbp Fn 
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而 在 实际 对 象 中 包含 的 字符 串 参数 却 可 以 正常 显示 出 来 。 看 来 EXT 中 还 要 加 一 个 类 型 判断 才 
好 啊 。Ext.air.dir{({name: 'name'，age: 18}，2) ;的 显示 结果 如 下 : 


name: name 
age: 18 


5. Ext .air .FileTreeLoader 
这 个 类 可 以 把 本 地 的 目录 和 文件 结构 显示 到 树 中 ， 如 图 C-27 所 示 。 


a el We ez 
可: 一 roci 
jy8 
a txt 
jb 
天 btxt 


习 testtbd 
图 C-27 使 用 FileTreeLoader 读 取 的 目录 树 
实例 代码 如 下 : 


Var tree = new Ex .ree .TreepPanel1({ 
autoHeight: true, 
loader: new Ext.air.FileTreeLoadert{t{ 
directory: air.File.applicationStorageDirectory.resolvePath{('.') 
人 
root: new Ext.tree.AsyncTreeNode!({ 
text: ‘root' 
}) 
}); 


tree.render('tree'); 二 桌面 到 
tree.expand() ; ss 
除了 使 用 了 Ext.air.FileTreeLoader 之 3 wp SYSTEM (C') 
外 ， 其 他 的 部 分 都 与 之 前 树 形 的 配置 相同 ， 在 创 es 
建 Ext.air.FileTreeLoader 的 时 候 还 要 指定 = 人 
根 目录 , 我们 这 里 使 用 air.File.application- 9 9 Administrator 的 文档 
StorageDirectory.resolvePath('.') 来 获 po | 
得 当前 应 用 在 系统 中 的 存储 目录 , 如 图 C-28 所 示 。 2 a | 
通常 是 在 CN\Documents and Settings\Administrator\ 局 点 面 
Application Data\examples.ext.ext\Local Store 下 , 手 “ 库 A 
工 在 这 里 建 了 几 个 目录 和 文件 ， 之 后 AIR 就 可 以 : ri | 
递归 目 录 结 构 生 成 树 形 效果 了 9 - 蕊 JJ examples.ext,ext 
6. Ext .air.MusicPLayer a > BEE 
在 EXT 2.0.2 中 我 们 提 过 的 Ext .air .souna ob 


类 ， 主 要 适用 于 短暂 的 声音 ， 如 蜂 鸣 和 闹钟 。 而 ”图 C-28 FileTreeLoader 默 认 读 取 的 目录 位 置 
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Ext .air.MusicPlayer 可 以 用 于 播放 较 长 的 声音 ， 如 音乐 、 歌 曲 等 。MusicpPlayer 支 持 所 有 对 
于 音乐 的 基本 操作 ， 包 括 暂 停 、 停 止 、 播 放 或 跳 转 等 。 使 用 Musicplayer 的 基本 代码 如 下 : 
Var mp = new Ext.air.Musicplayert{):; 
mp.adjustVolume(0.5); 
mp .playl'beep.mp3'); 
7. Ext .air.Notify 
我 们 使 用 这 个 类 ， 可 以 实现 MSN 那 种 提示 信息 ， 就 是 从 屏幕 的 右 下 角 突 然 弹出 一 个 带 有 提 
示 内 容 的 小 窗口 。 实 例 代码 如 下 : 
Var notify = new Ext.air.Notifyl(t{ 
extAllCSS: 'ext-2.2.1/resources/css/ext-all.css', 
msg: “Message ' ， 


icon: "ext-air/resources/icons/extlogol28 .png' 
EE 


不 过 在 测试 的 时 候 ， 因 为 是 直接 使 用 adl.exe 执 行 application.xml，CSS 样 式 和 图 片 都 显示 不 出 
来 ， 估 计 是 需要 将 应 用 打包 以 后 才能 使 用 相对 路 径 中 的 CSS 样 式 和 图 片 。 
8. Ext .air.VideoPanel 
最 后 这 个 是 支持 Flash 视 频 的 面板 ， 它 还 注册 了 videopanel1 这 个 xtype， 我 们 可 以 把 它 直 接 
应 用 在 布局 中 。 
有 两 种 方式 可 以 在 VideoPanel 中 播放 视频 ， 一 种 是 传 入 视频 的 ur1， 代 码 如 下 : 
Var Viewport = new Ext .Viewport!{t 
layout: 'fit', 
items:[t{ 
id: 'video'， 
url: ‘http://www.mediacollege.com/video-gallery/testclips/barsandtone. flv', 
xtype: 'videopanel' 
}] 
}); 


男 一 种 方法 是 调用 loadvVideo () 函 数 ， 代 码 如 下 ;: 


Ext .getCmp{'video') .loadVideo('http://www.mediacollege.com/video-gallery!/ 
testclips/barsandtone.flv'); 


不 过 使 用 loadVideo () 之 前 ， 要 保证 VideoPanel 已 经 演 染 完成 了 ， 否 则 就 会 报错 。 
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